JSFiddle - React, Tailwind, and code Playground

Dropdown top and bottom Tricky workaround.

by nilloc

HTML

<div class="wantOverlay">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
</div>

CSS

.wantOverlay {
  width: 200px;
  height: 100px;
  top: 200px;
  left:100px;
  overflow-y: scroll;
  position: absolute;
  
  /* border-radius:3px; */
  /* border:1px solid #ccc; */
  box-sizing:border-box;
}
.wantOverlay::before,
.wantOverlay::after
{
  position: fixed;
  width: inherit;
  height: 20px;
  pointer-events:none;
  text-align:center;
  box-sizing:border-box;
  opacity:0;
  transition:opacity 400ms ease-in-out;
  
  background-repeat:no-repeat;
}

.wantOverlay::before {
  content: '';
  background-image: 
    /* top left arrow */
    linear-gradient(
      135deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    /* top right arrow */
    linear-gradient(
      225deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    linear-gradient(to bottom, rgba(255,255,255,1) 0px, rgba(255,255,255,0) 20px);
  background-size:
    10px 10px,
    10px 10px,
    100% 30px;
  background-position:
    left calc(50% - 5px) top 0, 
    left calc(50% + 5px) top 0,
    left 0 top 0;
}

.wantOverlay::after {
  content: '';
  top:inherit;
  height:inherit;
  /* margin-top:inherit; */
  background-image: linear-gradient(
      45deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    /* top right notch corner */
    linear-gradient(
      315deg,
      transparent 0px 8px,
      rgba(0,0,0,0.5) 8px
    ),
    linear-gradient(to top, rgba(255,255,255,1) 0px, rgba(255,255,255,0) 100%);
  background-size:
    10px 10px,
    10px 10px,
    100% 30px;
  background-position:
    left calc(50% - 5px) bottom 0, 
    left calc(50% + 5px) bottom 0,
    left 0 bottom 0;
  /* padding-top:100%; */
}

.wantOverlay.top::before{
  opacity:1;
}
.wantOverlay.bottom::after{
  opacity:1;
}

JavaScript

let scrollable = document.querySelector('.wantOverlay');
function handleScroll(){
	console.log(scrollable.scrollHeight, scrollable.offsetHeight + scrollable.scrollTop);
  if(scrollable.scrollTop > 0){
  	scrollable.classList.add('top');
  }else{
  	scrollable.classList.remove('top');
  }
  
  if(scrollable.scrollHeight == scrollable.offsetHeight + scrollable.scrollTop){
 		scrollable.classList.remove('bottom');
  }else{
  	scrollable.classList.add('bottom');
  }

}

scrollable.addEventListener('scroll', handleScroll);

handleScroll();