skip to Main Content

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


  1. 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.

    .scrollable::before {
      content: "";
      position: absolute;
      width: 100%;
      /* SEE HERE */
      height: var(--beforeHeight);
      background: rgba(0, 0, 0, 0.5);
    }
    

    Next, you can actually set CSS variables from JavaScript. First, access document.documentElement (which is equivalent to the root element) .style and call setProperty().

    // get the full height (scrollHeight) of the scrollable <div>
    const scrollable = document.querySelector('.scrollable');
    const fullHeight = scrollable.scrollHeight;
    // set the CSS variable to the result (don't forget to add 'px')
    document.documentElement.style.setProperty('--beforeHeight', `${fullHeight}px`);
    

    RESULT

    const scrollable = document.querySelector('.scrollable');
    const fullHeight = scrollable.scrollHeight;
    document.documentElement.style.setProperty('--beforeHeight', `${fullHeight}px`);
    .scrollable {
      border: 1px solid black;
      height: 100px;
      width: 100px;
      overflow-y: scroll;
      position: relative;
    }
    
    .scrollable::before {
      content: "";
      position: absolute;
      width: 100%;
      height: var(--beforeHeight);
      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>
    Login or Signup to reply.
  2. If the parent height is known you can try to hack it using position sticky

    .scrollable {
      --h: 100px; /* the parent height */
    
      border: 1px solid black;
      height: var(--h);
      width: 100px;
      overflow-y: scroll;
      position: relative;
    }
    
    .scrollable::before {
      content: "";
      display: block;
      position: sticky;
      top: 0;
      height: inherit;
      margin-bottom: calc(-1*var(--h));
      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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search