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

[Anonymous]

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

• Когда отображается ширина элементов вкладок, превышает ширину контейнера, две кнопки прокрутки (слева и справа). /> При прокрутке до одного конца кнопка на этом конце отключена.
  
  < /li>
  Если оба пуговицы становятся отключенными, это означает, что засго возможнот, что задолженные элементы. В этом случае прячут две кнопки напрямую.
  
  < /li>
  < /ol>
  Я скоро написал следующий код: < /p>
  
  
  

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

  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>
  Однако проблема в том, что содержание прокрутки не полностью покрывается кнопками. Похоже, что элементы протекают через кнопки.
  
   < /p>
  Я пробовал следующие методы по отдельности, но никто из них не работает. Маска 

  до .
  
  Поскольку находится внутри области прокрутки, область замаскированной маскировки будет прокручивать вместе с ним вместо того, чтобы быть исправленной в положении. clip-path или mask to .
  
  Хотя это исправлено, две кнопки также будут маскированы. контейнера.
  
  он сильно зависит от @Container Scroll-State (Scrollable) < /code> для реализации этой функции. Если кнопки размещены за пределами контейнера, состояние прокрутки контейнера не будет получено. Следовательно, фиксированный цвет не может быть использован, и его следует сделать прозрачным.

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

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