Question

对于overflow: scroll的标准行为，padding-bottom位于滚动块的底部。但是如何修复padding-bottom，这样奇怪的文字就不会出现在底部边框

之后

body{
  background-color: green;
}

.wrapper{
 height: 100px;
 width: 300px;
 background: transparent;
 border: 1px solid #000;
 padding-top: 20px;
 padding-bottom: 20px;
 overflow-y: scroll;
 position: fixed;
 left: 10%;
 top: 10%;
}

.middle{
   padding-left: 20px;
   padding-right: 20px;
 height: 100%;
 
}

.inner{
 background: blue;
 height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="middle">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
    </div>
  </div>
</div>

Answer 1

我认为这可能会有所帮助。

＆＃13;

body{
  background-color: green;
}

.wrapper{
 height: 140px;
 width: 300px;
 background: transparent;
 border: 1px solid #000;
 position: fixed;
 left: 10%;
 top: 10%;
}

.middle{
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 20px;
 padding-right: 20px;
 height: 100px;
}

.inner{
 background: blue;
 overflow-y: scroll;
 height: 100%;
}
::-webkit-scrollbar {
    width: .5rem; 
    background: inherit;
}
::-webkit-scrollbar-thumb {
    background: #f00;
    border-radius:.5rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="middle">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
    </div>
  </div>
</div>

＆＃13;

Answer 2

CSS完全是幻想！

制作一个外部容器并给它一些填充物以提供所需的错觉。我无法得到你的小提琴，所以我做了一个新的。在这里：https://jsfiddle.net/z9ztcstb/

＆＃13;

.container {
  position: relative;
}

.text-container {
  background: red;
  padding: 10px;
}

.text {
  height: 100px;
  /* background: green; */
  overflow: scroll;
}

＆＃13;

<div class="container">
  <div class="text-container">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
      quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
    </div>
  </div>
</div>

＆＃13;

Answer 3

我建议您将滚动条放在内盒上，这将是防止蓝色背景下文本不必要溢出的最有效方法。你可以在没有＆＃39;内部＆＃39; CSS。试试吧。 fiddle here

希望这有帮助

＆＃13;

$('.wrapper').on('scroll', function() {
  $('.inner').scrollTop($(this).scrollTop());
});

＆＃13;

body {
  background-color: green;
}

.wrapper {
  height: 100px;
  width: 300px;
  background: transparent;
  border: 1px solid #000;
  padding-bottom: 30px;
  position: fixed;
  left: 10%;
  top: 10%;
}

.middle {
  margin: 20px;
  padding: 2px 5px;
  height: 90%;
  overflow-y: scroll;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="middle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
  </div>
</div>

＆＃13;

Answer 4

这将有效：

<div class="wrapper">
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
    </div> 
    <div class="border">
     </div> 
 </div>



 div.wrapper {
     width:340px;
     height:120px;
     background-color:#ccc;
     overflow:auto;
     position:relative;
 }
 div.border {
   border:solid 10px red;
   height:100px;
   position:fixed;
   width:300px;
   height:100px;
   top:0;
   left:0;
 }
 div.content{
   z-index:1;
   margin:10px;
 }

重点是将边框放在.wrapper容器之外。我在这里看到的唯一问题是你不能使用鼠标滚轮在.wrapper中滚动.content，因为它已被.border重叠

以下是您可以看到的JSFiddle链接：https://jsfiddle.net/zsydyc/pw9jz5s2/3/

CSS固定填充溢出：滚动

4 个答案: