Question

itry得到一个可以滚动的div，我尝试添加填充，但它看起来像填充底部没有工作。如何添加填充底部？

＆＃13;

body {
  background: black;
}

.scroll {
  width: 150px;
  height: 300px;
  overflow: scroll;
  background: red;
  padding: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content {
  padding-bottom: 20px;
}

 ::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

 ::-webkit-scrollbar-thumb {
  background: #FF0000;
}

＆＃13;

<div class="scroll">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus modi voluptates vitae! Minus possimus, autem error debitis vel numquam ab incidunt sunt doloremque odit ratione deleniti est ipsa facere, dolorum inventore, ullam labore sint obcaecati
      quasi, nemo. Fuga est minima nihil itaque dolorum omnis consequatur dignissimos, qui id rem, accusantium reiciendis inventore obcaecati ut dolores consectetur nisi non esse facilis? Tempora, perferendis, nostrum! Ex dolor temporibus, laborum facilis
      consectetur ipsam, nostrum, consequuntur atque earum qui officiis in. Eius delectus asperiores veritatis accusamus qui dolore illo expedita veniam tenetur unde voluptatibus deleniti facilis praesentium sapiente iure hic omnis laborum libero quis,
      quibusdam earum quod, consectetur nemo! Ea hic accusantium quidem facere ipsa, non tempore nobis architecto veniam dicta minima aut quasi temporibus fugiat dolorem, deserunt! Officiis, consectetur. Laudantium, vero, ducimus consectetur architecto
      omnis ipsum rerum placeat vitae ea ex autem praesentium. Officia delectus, minima fuga iusto perspiciatis enim molestias ea aliquam omnis saepe, nostrum nulla dolores et dolore nesciunt possimus. Impedit iste, est rerum! Magnam dignissimos aut quos
      necessitatibus, inventore consequuntur pariatur labore, nostrum assumenda dolorem vel in. Consequuntur eaque sed dolorum repudiandae excepturi cupiditate, quod quisquam ea doloribus, molestiae repellat obcaecati hic, qui est nam natus assumenda
      officia enim. Aliquam.</p>
  </div>
</div>

＆＃13;

https://jsfiddle.net/uazp78x6/1/

Answer 1

添加scroll2更新滚动

.scroll2{
  width:150px; 
  height:300px;
  padding-top:20px;
  background:red;
  padding:22px;
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.scroll{
  width:150px;
  height:260px;
  overflow:auto;
  background:red;
  padding-right:10px;
  margin-left:17px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);

}

换行于scroll2 div

<div class="scroll2">
    <div class="scroll">
       <div class="content">
        Ipsum...
       </div>
    </div>
 </div>

Answer 2

如果想要在底部随时显示 padding ，那么您可能需要一个额外的包装器来在框的底部放置一个遮罩以隐藏部分文本。

不太确定通过重新设置滚动条可以很好。

想法的例子

＆＃13;

  body {
  background: black;
}

.scroll {
  width: 194px;
  height: 344px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scroll:before {
  content: "";
  position: absolute;
  left: 0;
  right: 1.2em;
  height: 22px;
  top: 305px;
  background: red;
}

.scroll .buffer {
  box-sizing: border-box;
  height: 100%;
  padding: 22px;
  overflow: scroll;
}

  p {
    margin: 0;
    line-height: 22px;
  }
.content {
  padding-bottom: 22px;
}

::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /*optional: just make scrollbar invisible;$/
}
/* optional: show position indicator in red */
  ::-webkit-scrollbar-thumb {
    background: #ff0000;
  }

＆＃13;

<div class="scroll">
  <div class="buffer">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus modi voluptates vitae! Minus possimus, autem error debitis vel numquam ab incidunt sunt doloremque odit ratione deleniti est ipsa facere, dolorum inventore, ullam labore sint obcaecati
        quasi, nemo. Fuga est minima nihil itaque dolorum omnis consequatur dignissimos, qui id rem, accusantium reiciendis inventore obcaecati ut dolores consectetur nisi non esse facilis? Tempora, perferendis, nostrum! Ex dolor temporibus, laborum facilis
        consectetur ipsam, nostrum, consequuntur atque earum qui officiis in. Eius delectus asperiores veritatis accusamus qui dolore illo expedita veniam tenetur unde voluptatibus deleniti facilis praesentium sapiente iure hic omnis laborum libero quis,
        quibusdam earum quod, consectetur nemo! Ea hic accusantium quidem facere ipsa, non tempore nobis architecto veniam dicta minima aut quasi temporibus fugiat dolorem, deserunt! Officiis, consectetur. Laudantium, vero, ducimus consectetur architecto
        omnis ipsum rerum placeat vitae ea ex autem praesentium. Officia delectus, minima fuga iusto perspiciatis enim molestias ea aliquam omnis saepe, nostrum nulla dolores et dolore nesciunt possimus. Impedit iste, est rerum! Magnam dignissimos aut
        quos necessitatibus, inventore consequuntur pariatur labore, nostrum assumenda dolorem vel in. Consequuntur eaque sed dolorum repudiandae excepturi cupiditate, quod quisquam ea doloribus, molestiae repellat obcaecati hic, qui est nam natus assumenda
        officia enim. Aliquam.</p>
    </div>
  </div>
</div>

＆＃13;

在oveflow卷轴上没有填充底部

2 个答案: