Исключить полосу прокрутки из изображения-маски ⇐ CSS

[Anonymous]

У меня есть горизонтальное меню с изображением маски по краям, однако полоса прокрутки включена в маску, а края затемнены. Как создать еще одну маску в нижней части элемента div, чтобы полностью отобразить полосу прокрутки? p>
Я пробовал использовать размер маски для нижней части, но полоса прокрутки полностью скрыта.

Код: Выделить всё

  mask-size: 100% 85%;
mask-position: top;
mask-repeat: no-repeat;

Код: Выделить всё

.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;
}

Код: Выделить всё

text
text
text
text
text
text
text
text
text
text
text
text
text

Подробнее здесь: https://stackoverflow.com/questions/786 ... mask-image