我想在可滚动容器末端的项目上实现模糊效果。但是即使滚动更远,它也只停留在一项上。它应该只贴在右侧。
初始图片
.main-container .scrollable-nav {
width: 75%;
overflow-x: scroll;
position: absolute;
}
.list-item-container {
list-style: none;
display: flex;
font-size: 20px;
}
li {
padding-right: 30px;
}
.right-bg::after {
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 60px;
height: 100%;
right: 0;
position: absolute;
z-index: 9999999;
margin-left: auto;
top: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}
<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>
您应该将伪元素直接赋予main-container
。
.main-container {
position: relative;
width: 75%;
}
.main-container .scrollable-nav {
width: 100%;
overflow-x: scroll;
}
.list-item-container {
list-style: none;
display: flex;
font-size: 20px;
}
li {
padding-right: 30px;
}
.main-container::after {
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 60px;
height: calc(100% - 20px);
right: 0;
position: absolute;
z-index: 9999999;
margin-left: auto;
top: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}
<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>