Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adds a top/bottom shadow for scrollable area depending on current scroll position.
const scrollable = document.querySelectorAll( '.scrollable' );
scrollable.forEach( function( el ) {
if ( el.offsetHeight < el.scrollHeight ) {
el.classList.add( 'bottom-shadow' );
}
el.addEventListener( 'scroll', function( e ) {
const scrollHeight = e.target.clientHeight;
const scrollPosition = scrollHeight + e.target.scrollTop;
const currentPosition = e.target.scrollHeight;
currentPosition === scrollPosition ? el.classList.remove( 'bottom-shadow' ) : el.classList.add( 'bottom-shadow' );
scrollHeight === scrollPosition ? el.classList.remove( 'top-shadow' ) : el.classList.add( 'top-shadow' );
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.