I have a div with overflow scroll attribute and i want to see its background in a ::before (since backdrop-filter doesn’t work with multiple divs otherwise)
So my issue is to extend the ::before height to be 100% in an overflow div, an example:
.scrollable {
border: 1px solid black;
height: 100px;
width: 100px;
overflow-y: scroll;
position: relative;
}
.scrollable::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="scrollable">
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
hello<br/>
</div>
How can I fix that issue? I can increase the height beyond 100% but I seems like a bad practice, and also it doesn’t help in my real example.
2
Answers
This can be accomplished with JavaScript and a CSS variable.
First, think of a CSS variable to use for the
::before
height. We’ll set the value using JavaScript in a moment.Next, you can actually set CSS variables from JavaScript. First, access
document.documentElement
(which is equivalent to the root element).style
and callsetProperty()
.RESULT
If the parent height is known you can try to hack it using position sticky