将底部填充添加到最后一个可见元素，并带有溢出Y属性

Question

我在一个DIV上工作，该列表包含一个列表，该列表中的溢出Y属性设置为" scroll"。我正在尝试将填充物添加到滚动区域内可见的底部，以使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问题：

"我如何在Div中的最后一个可见列表项目中添加填充？

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

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

demo

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

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