css - 滚动 div 底部的粘性覆盖层

Question

我有一个可滚动的容器。我想要一个覆盖层粘在这个容器的底部，但它应该只覆盖可滚动区域的内容，而不应该覆盖滚动条。期望的结果:

在我目前的解决方案中，问题是叠加层还覆盖了滚动条。

我可以通过为叠加层的“宽度”和“右侧”设置像素值来解决这个问题。但我不想那样做。

 .container {
      position: relative;
      border: solid 1px red;
      height: 100px;
      width: 200px;
      float: left;
      margin-right: 16px;
    }
        
    .scrollable {
      height: 100%;
      overflow-y: scroll;
    }

    .overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 30px;
      background: rgba(100, 200, 10, 0.5);
    }

<section class="container">
        <div class="scrollable">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
        maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
        cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
        quidem.
        </div>
        <div class="overlay"></div>
</section>
   

Answer 1

.container {
      position: relative;
      border: solid 1px red;
      height: 100px;
      width: 200px;
      float: left;
      margin-right: 16px;
    }
        
    .scrollable {
      height: 100%;
      overflow-y: scroll;
    }

    .scrollable p {
      z-index:-2;
      position:relative;
      }

    .overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
width:100%;
      height: 30px;
      background: rgba(100, 200, 10, 0.5);
      z-index:-1;
    }

<section class="container">
        <div class="scrollable">
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
        maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
        cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
        quidem.</p>
        </div>
        <div class="overlay"></div>
</section>