JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
    <div id="top"></div>
    text
    <hr>
    <br>
    text
    <hr>
    <br>
    text
    <hr>
    <br>
    text
    <hr>
    <br>
    text
    <hr>
    <br>
    text
    <hr>
    <br>
    <div id="bottom"></div>
</div>

CSS

#block{
    height: 100px;
    overflow:auto;
    background: rgba(150,150,150,0.7);
}
#top,#bottom{
    transition:box-shadow 0.5s ease 0s;    
}

JavaScript

function addMouseScrollListener(obj, handler) {
	if (obj.attachEvent) {
		obj.attachEvent("onmousewheel", handler); // IE and Opera
	} else {
		obj.addEventListener("DOMMouseScroll", handler, false); // FF
		obj.addEventListener("mousewheel", handler, false); // Chrome
	}
}

function get(id){return document.getElementById(id)}

addMouseScrollListener(get("block"),scroll); //вешаем обработчик только на колесо мыши
get("block").onscroll=scroll //Вешаем обработчик на прокрутку самого блока.
function scroll(e) {
    var elem=e.target,
    shadow="0 0 20px 5px red";//параметры тени
    console.log(elem)
    if (elem.scrollTop == 0){
        get("top").style.boxShadow=shadow;
        setTimeout(function(){get("top").style.boxShadow=""},500)
    }else if (elem.scrollTop == elem.scrollHeight-elem.offsetHeight){
        get("bottom").style.boxShadow=shadow;
        setTimeout(function(){get("bottom").style.boxShadow=""},500)
    }
}