粘贴叠加在滚动div的底部 [英] Sticky overlay at bottom of scrolling div

问题描述

我有一个可滚动的容器。我想要一个覆盖粘贴到这个容器的底部，但它应该只覆盖可滚动区域的内容，它不应该覆盖滚动条。
所需结果：

I've got a scrollable container. I want an overlay to stick to the bottom of this container, but it should only cover the contents of the scrollable area, it should not cover the scrollbar. Desired result:

我现在的解决方案的问题是覆盖也覆盖了滚动条。

With my current solution the problem is that the overlay also covers the scrollbar.

我可以解决这个问题，通过设置像素值的'宽度'和'右'的覆盖。但是我不想这样做。

I COULD solve the issue by setting pixel values for 'width' and 'right' of the overlay. But I don't want to have to do that.

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

推荐答案

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

这篇关于粘贴叠加在滚动div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！