I have an horizontal menu with mask image at the edges, however the scrollbar is included in the mask and the edges are faded, How do I create another mask on the lower part of the div to show the scrollbar completely?
.nav {
width: 400px;
overflow-x: auto;
-webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 97%, rgba(255, 255, 255, 0) 100%);
padding-bottom: 20px;
}
.menu {
display: flex;
flex-direction: row;
gap: 1rem;
}<nav class="nav">
<div class="menu">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</nav>