How to make content go under scrollbar with CSS only? - html

Question

I know there is variety of JS libs for custom scroll but I believe with modern browsers it's better to go with native behaviour as more consistent and predictable. I assume I will have nice scrollbars in Chrome/Edge(Blink), acceptable in FF with their own simple color/sizing customisations and I won't care about other browsers.
The only problem I'm facing now is - I want li elements to go under the scrollbar. I tried to move content under it via transform: translateX(15px) / margin-right: -15px / right: -15px / overflow: overlay and nothing helped (while overflow:overlay does the job for <body/> it doesn't help with inner containers).
Any trick to achieve desired behaviour without JS?
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar {
background-color: transparent;
transition: .3s;
}
*:hover::-webkit-scrollbar {
width: 15px !important;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid #444;
}
ul {
margin: 0;
padding: 0;
height: 100vh;
width: 70vw;
overflow-y: scroll;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
li {
cursor: pointer;
height: 40px;
transition: background .2s;
display: block;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
ul:after {
content: "Scroll ↧";
color: white;
letter-spacing: 10px;
position: fixed;
left: 50%;
top: 50%;
font-size: 40px;
line-height: 1;
transform: translateX(-50%) translateY(-50%);
mix-blend-mode: difference;
}
body {
background: #12c2e9;
background: #c471ed20;
background: #444;
justify-content: center;
display: flex;
padding: 0;
margin: 0;
}
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

Answer 1

The overflow: overlay does what you want. But take in account that this feature is not a standard. Also Edge will have another property -ms-overflow-style: -ms-autohiding-scrollbar; to hide scrollbar. Also test carefully in Firefox.
The overflow prop should be put on the body element, so scrollbar overlay on the top of ul.
body {
padding: 0;
margin: 0;
overflow: overlay;
}
ul {
margin: 0;
padding: 0;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
Working sample (tested in Chrome)