Использование `scroll-state ()` для создания горизонтальных кнопок прокрутки в CSS ⇐ CSS

[Anonymous]

Я пытаюсь использовать запросы с контейнерными прокрутками для создания кнопок прокрутки для горизонтальной панели вкладок в CSS. Пользователи могут нажать эти кнопки, чтобы прокрутить длинную панель вкладок. Я хочу, чтобы у него была следующая логика: < /p>

• Когда ширина элементов вкладки превышает ширину контейнера, отображается две кнопки прокрутки (слева и справа).
  

I soon wrote the following code:

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

ul,
li,
button {
all: unset;
}

.container {
resize: inline;
overflow-inline: auto;
padding-block: 12px;
inline-size: 200px;
display: flex;
border: 1px solid black;
container: tab / scroll-state inline-size;
}

ul {
display: flex;
}

li {
padding-inline: 8px;
}

button {
border-radius: 4px;
padding-inline: 8px;
block-size: 100%;
position: sticky;

&:hover {
background-color: #0002;
}

&:active {
opacity: 0.8;
}

&.left {
left: 0;
}

&.right {
right: 0;
}

@container not scroll-state(scrollable: left) {
&.left {
opacity: 0.3;
pointer-events: none;
interactivity: inert;
}
}

@container not scroll-state(scrollable: right) {
&.right {
opacity: 0.3;
pointer-events: none;
interactivity: inert;
}
}

@container scroll-state(scrollable: none) {
display: none;
}
}< /code>

◀
[list]
[*]Foo
[*]Bar
[*]Baz
[*]Qux
[*]Quux
[*]Corge
[/list]
▶
< /code>
< /div>
< /div>
< /p>
Однако проблема в том, что содержание прокрутки не полностью покрывается кнопками. Похоже, что элементы протекают через кнопки.

Я пробовал следующие методы индивидуально, но ни один из них не работает. Маска 

до .

Поскольку находится внутри области прокрутки, область замаскированного прокрутки вместе с ним вместо того, чтобы быть исправленной в положении. Маскирован. Если кнопки размещены за пределами контейнера, состояние прокрутки контейнера не будет получено. Следовательно, фиксированный цвет не может быть использован, и его следует сделать прозрачным.

Как его решить?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ons-in-css