Adds a top/bottom shadow for scrollable area depending on current scroll position.

scrollable-container.js

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' );
	});
});