Question

我正在处理一个div，它包含一个列表，该列表溢出了overflow-y属性设置为＆＃34; scroll＆＃34;。我试图在滚动区域内可见的底部添加填充，以便div中的最后一个可见列表项具有底部填充，但填充仅应用于整个列表的末尾滚动完成后，而不是最后一个当前可见的列表项。如何将填充添加到div中最后一个当前可见的列表项？

Expectation: 
_____________
| * item 1   |  
| * item 2   |
| * item 3   |
|____________| <-- extra padding beyond last visible element (remaining list items 
cannot be seen until you scroll lower)

Actual:
_____________
| * item 1   |  
| * item 2   |
| * item 3   |
|_* item 4 __| <-- extra padding is only added at the end of the entire 
scrolled list

代码：https://codepen.io/afreymiller/pen/BYVByy

Answer 1

正如TNG在下面评论的那样，原始答案没有回答这个问题。以下更新。回顾一下OP问题：

＆＃34;如何将填充添加到div中最后一个当前可见的列表项？＆＃34;

因此，这意味着列表的可见部分的高度不同。要根据它的可见性和/或滚动位置更改样式，需要使用JavaScript / jQuery。以下演示是使用position，z-index，<frame>和兄弟<div>的纯CSS / HTML解决方案。

<iframe>具有srcdoc属性，<ul>为其值。 <iframe>（.list）和容器（.box）应具有相同的高度。

演示

＆＃13;

.box {
  position: relative;
  height: 100px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  overflow:hidden
}

.list {
  display: block;
  position: absolute;
  z-index: 0;
  height: 100px;
  width: 300px;
}

.mask {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 15px;
  width: calc(100% - 12px);
  background: #fff;
}
  
.show { 
  outline: 1px dashed red;
}

.tall {
  height:125px
}

＆＃13;

<p>.mask is outlined to show it's location</p>
<section class='box'>
<iframe class='list' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Burito</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask show'>&nbsp;</div>
</section>
<p>.mask not outlined</p>
<section class='box'>
<iframe class='list' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Pepper</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask'>&nbsp;</div>
</section>
<p>.box, and .list height increases</p>
<section class='box tall'>
<iframe class='list tall' srcdoc='<ul style="height: 105px;padding:0px 0 45px 0"><li style="height: 20px;padding-bottom: 5px">Pizza</li>  <li style="height: 20px;padding-bottom: 5px">Spinach</li><li style="height: 20px;padding-bottom: 5px">Lettuce</li><li style="height: 20px;padding-bottom: 5px">Liver</li><li style="height: 20px;padding-bottom: 5px">Spaghetti</li><li style="height: 20px;padding-bottom: 5px">Meatballs</li></ul>' scrolling='yes'></iframe>
<div class='mask'>&nbsp;</div>
</section>

＆＃13;

使用具有overflow-y属性的div将Bottom Padding添加到最后一个可见元素

1 个答案:

演示