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

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

.navigation{
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
背景色：黑色；
空白：nowrap；
位置：相对位置；
宽度：100%；
}
.导航：：之后{
内容：“；
位置：绝对位置；
身高：100%；
右：0；
背景图像：线性渐变（向右，rgba（255255,0），红色85%）；
宽度：15%；
}
.项目{
flex:0自动；
高度：100px；
宽度：100px；
背景颜色：蓝色；
右边距：10px；
}
}

---

为什么不在应用相同的

高度时使用
位置：fixed
，
类中的
项


.navigation{
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
背景色：黑色；
空白：nowrap；
位置：相对位置；
宽度：100%；
}
.导航：：之后{
内容：“；
位置：固定；
高度：100px；
右：0；
背景图像：线性渐变（向右，rgba（255，255，255，0），红色85%）；
宽度：15%；
}
.项目{
flex:0自动；
高度：100px；
宽度：100px；
背景颜色：蓝色；
右边距：10px；
}
为什么不在应用相同的
高度时使用
位置：fixed
，
类中的
项


.navigation{
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
背景色：黑色；
空白：nowrap；
位置：相对位置；
宽度：100%；
}
.导航：：之后{
内容：“；
位置：固定；
高度：100px；
右：0；
背景图像：线性渐变（向右，rgba（255，255，255，0），红色85%）；
宽度：15%；
}
.项目{
flex:0自动；
高度：100px；
宽度：100px；
背景颜色：蓝色；
右边距：10px；
}
使用
位置：粘性


.navigation{
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
背景色：黑色；
空白：nowrap；
利润率：0.20px；
}
.导航：：之后{
内容：“；
显示：块；
位置：粘性；
右：0；
背景图像：线性渐变（向右，rgba（255，255，255，0），红色85%）；
宽度：15%；
左边距：-15%；/*相同宽度，不占用任何空间*/
弹性收缩：0；/*这对于保持宽度：15%很重要*/
}
.项目{
flex:0自动；
高度：100px；
宽度：100px；
背景颜色：蓝色；
右边距：10px；
}
.导航。项目：最后一个子项{
右边距：自动；
}
使用
位置：粘性


.navigation{
显示器：flex；
柔性包装：无包装；
溢出-x：自动；
背景色：黑色；
空白：nowrap；
利润率：0.20px；
}
.导航：：之后{
内容：“；
显示：块；
位置：粘性；
右：0；
背景图像：线性渐变（向右，rgba（255，255，255，0），红色85%）；
宽度：15%；
左边距：-15%；/*相同宽度，不占用任何空间*/
弹性收缩：0；/*这对于保持宽度：15%很重要*/
}
.项目{
flex:0自动；
高度：100px；
宽度：100px；
背景颜色：蓝色；
右边距：10px；
}
.导航。项目：最后一个子项{
右边距：自动；
}