如何将遮罩渐变添加到水平滚动条

Question

我试图在水平滚动条的右侧应用渐变掩码，以指示列表水平滚动。我已经创建了一个渐变层作为我的遮罩，但是当滚动时遮罩会随着导航项水平移动。我希望在用户滚动导航时遮罩保持固定，但不想将其定位为"固定"，因为我需要遮罩包含在导航容器的宽度和高度内。但我不确定如何达到这种效果。谢谢你的帮助！

.navigation{
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
position: relative;
width: 100%;
}

.navigation::after {
content: "";
position: absolute;
height: 100%;
right: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
width: 15%;
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}
}

<div class = "navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div>

Answer 1

使用position:sticky

.navigation {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
margin:0 20px;
}
.navigation::after {
content: "";
display:block;
position: sticky;
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), red 85%);
width: 15%;
margin-left:-15%; /* same a width to not take any space */
flex-shrink:0; /* this is important to keep the width:15% */
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}
.navigation .item:last-child {
margin-right:auto;
}

<div class="navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 2

为什么不在应用与.item类相同的height的同时使用position: fixed？

.navigation {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
background-color: black;
white-space: nowrap;
position: relative;
width: 100%;
}
.navigation::after {
content: "";
position: fixed;
height: 100px;
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), red 85%);
width: 15%;
}
.item {
flex: 0 0 auto;
height: 100px;
width: 100px;
background-color: blue;
margin-right: 10px;
}

<div class="navigation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>