How to add a Mask Gradient to Horizontal Scrollbar - html

Question

I'm trying to apply a gradient mask on the right side of a horizontal scrollbar to indicate that the list scrolls horizontally. I've created a gradient-layer as my mask, however the mask moves horizontally with the navigation items when scrolled. I want the mask to stay fixed as the user scrolls through the navigation, but don't want to position it 'fixed' because I need the mask to be contained within the width and height of the navigation container. But I'm not sure how to achieve this effect. Thanks for the help!
.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

Use 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

Why not just use position: fixed while applying the same height the .item class has?
.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>