使用CSS `scroll-state()`实现横向标签栏滚动按钮时的内容穿透问题

这个问题我之前在测试scroll-state新特性时也踩过坑！你的思路完全没问题，就是在堆叠层级和flex布局细节上漏了点东西，调整几下就好啦～

问题根源分析 #

你的核心问题出在滚动内容与按钮的堆叠层级，以及flex容器内同级元素的显示逻辑：

1. 按钮和<ul>是.container（flex容器）的同级子元素，DOM顺序上<ul>在左侧按钮之后，因此<ul>的堆叠层级更高，滚动时标签文字会直接覆盖在左侧按钮上方；
2. 按钮未设置z-index，无法主动提升层级挡住下方的滚动内容；
3. <ul>未设置空间占比规则，在flex布局中可能和按钮出现布局挤压，加剧内容穿透的视觉效果。

解决方案 #

只需要调整3个关键样式点，就能完美解决内容穿透问题，同时保留你原本的scroll-state交互逻辑：

1. 给按钮添加z-index，提升堆叠层级

在按钮的基础样式中加入z-index: 1;，确保按钮始终在滚动内容的上层，彻底挡住穿透的标签文字。

2. 让<ul>占据容器剩余空间，避免布局挤压

给<ul>添加flex: 1; overflow-inline: hidden;，让它填满容器中除按钮外的所有可用空间，同时避免自身出现滚动条，把滚动逻辑完全交给外层的.container。

3. 优化按钮的高度控制逻辑

用inset-block: 0;替代block-size: 100%;，在sticky定位下，inset属性能更精准地让按钮占满容器的块级高度，避免因容器内边距导致的高度偏差。

修改后的完整代码 #

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;
  flex: 1; /* 让ul占据容器剩余空间 */
  overflow-inline: hidden; /* 隐藏自身滚动条，由container统一处理 */
}

li {
  padding-inline: 8px;
  white-space: nowrap; /* 强制标签文字不换行，保持横向滚动逻辑 */
}

button {
  border-radius: 4px;
  padding-inline: 8px;
  inset-block: 0; /* 替代block-size:100%，精准占满容器高度 */
  position: sticky;
  z-index: 1; /* 提升层级，挡住下方滚动内容 */
  
  &: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;
  }
}

<div class="container">
  <button class="left">◀</button>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>
    <li>Quux</li>
    <li>Corge</li>
  </ul>
  <button class="right">▶</button>
</div>

额外优化说明 #

• 给<li>添加white-space: nowrap;：防止标签文字在容器变窄时自动换行，确保始终符合横向滚动的交互逻辑；
• 保留你原本的scroll-state规则：按钮在不可滚动方向自动变灰禁用，完全不可滚动时自动隐藏，逻辑不受任何影响。

这样修改后，滚动的标签内容就不会穿透按钮显示，所有交互逻辑和你预期的完全一致啦！

内容来源于stack exchange