You could try position sticky. If you use this make sure you're ok with the current browser support. https://caniuse.com/#feat=css-sticky
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.scrollable {
position: absolute;
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid orange;
}
.scrollable:before {
content: '';
position: sticky;
display: block;
top: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
}
<!-- language: lang-html -->
<div class="scrollable">
<p>
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
<!-- end snippet -->
You could use `calc()` to substract the width of the scrollbar from the overlay:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.scrollable {
position: absolute;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid orange;
}
.scrollable:before {
content: '';
position: absolute;
width: calc(100% - 18px);
height: 60px;
background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
}
.content {
width: 100%;
height: 100px;
padding: 40px 0;
overflow: auto;
}
<!-- language: lang-html -->
<div class="scrollable">
<p class="content">
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
</p>
</div>
<!-- end snippet -->
