滚动容器底部的模糊效果

Question

我想在可滚动容器末尾的项目上实现模糊效果。我的列表是垂直的，我想看到底部的模糊效果。但目前还没有出现模糊效果。

到目前为止，我有这个：

.main-container {
position: relative;
height: 100px;
}
.main-container .scrollable-nav {
overflow: scroll;
height: 100%;
}
.list-item-container {
list-style: none;
font-size: 20px;
}
li {
padding-right: 30px;
}
.main-container::after {
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 60px;
height: calc(100% - 20px);
right: 0;
position: absolute;
z-index: 9999999;
margin-left: auto;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 5%, #fff 100%);
}

https://jsfiddle.net/n1y57zt9/

感谢任何想法/帮助！

感谢

Answer 1

使项目在末尾具有模糊效果，将background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 5%, #fff 100%)应用于列表(稍微更改参数(：

---

从小提琴复制的代码，并将背景更改为黑色，因为您的模糊效果(linear-graident为白色(

body{
background-color:black;
}
.main-container {
position: relative;
height: 100px;
}
.main-container .scrollable-nav {
overflow: scroll;
height: 100%;
}
.list-item-container {
list-style: none;
font-size: 20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 80%, #fff 100%);
}
li {
padding-right: 30px;
}
li:last-child {

}

<div class="main-container">
<div class="scrollable-nav right-bg">
<ul class="list-item-container ">
<li class="m-item">menuItem1</li>
<li class="m-item">menuItem2</li>
<li class="m-item">menuItem3</li>
<li class="m-item">menuItem4</li>
<li class="m-item">menuItem5</li>
<li class="m-item">menuItem6</li>
<li class="m-item">menuItem7</li>
<li class="m-item">menuItem8</li>
</ul>
</div>
</div>

只对最后一个元素产生这种效果，使用css伪选择器:last-child

body{
background-color:black;
}
.main-container {
position: relative;
height: 100px;
}
.main-container .scrollable-nav {
overflow: scroll;
height: 100%;
}
.list-item-container {
list-style: none;
font-size: 20px;
}
.list-item-container > .m-item:last-child{
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 5%, #fff 100%);
}
li {
padding-right: 30px;
}

<div class="main-container">
<div class="scrollable-nav right-bg">
<ul class="list-item-container ">
<li class="m-item">menuItem1</li>
<li class="m-item">menuItem2</li>
<li class="m-item">menuItem3</li>
<li class="m-item">menuItem4</li>
<li class="m-item">menuItem5</li>
<li class="m-item">menuItem6</li>
<li class="m-item">menuItem7</li>
<li class="m-item">menuItem8</li>
</ul>
</div>
</div>