本文详解如何通过嵌套容器结构，使左右滚动提示覆盖层始终固定在可滚动父容器的两侧，不随内容滚动而位移，并提供动态显示/隐藏逻辑与渐变视觉反馈。

本文详解如何通过嵌套容器结构，使左右滚动提示覆盖层始终固定在可滚动父容器的两侧，不随内容滚动而位移，并提供动态显示/隐藏逻辑与渐变视觉反馈。

实现“粘性覆盖层”（sticky overlay）的关键在于分离定位上下文与滚动上下文。原始代码中，.scroll-overlay 元素直接置于 .scrollable-div 内部，而该容器本身设置了 overflow-x: auto 和 position: relative —— 这导致覆盖层虽为 position: absolute，却仍受其内部滚动内容的视觉影响（实际是滚动容器的 scrollLeft 变化改变了视口内绝对定位元素的渲染位置）。解决方法是引入两层容器嵌套：

• 外层容器（.scrollable-div）：仅负责定位与尺寸约束，overflow-x: hidden（或 none），position: relative，作为覆盖层的定位参考；
• 内层容器（子 <div>）：承载所有可滚动内容，单独设置 <code>overflow-x: auto，承担滚动行为。

  这样，.scroll-overlay 的 position: absolute 就严格相对于静止的外层容器定位，不再随滚动偏移。

  以下是优化后的核心 HTML 结构片段：

  <div class="scrollable-div" id="scrollableDiv">
    <div> <!-- 内层滚动容器 -->
      <div class="circular-btn selected">1</div>
      <div class="circular-btn">2</div>
      <!-- ... 更多按钮 -->
      <div class="scroll-overlay scroll-overlay-left"></div>
      <div class="scroll-overlay scroll-overlay-right"></div>
    </div>
  </div>

  对应关键 CSS 调整：

  .scrollable-div {
    position: relative;
    width: 50%;
    overflow-x: hidden; /* 外层不滚动 */
    padding: 10px 0;
    margin-bottom: 20px;
  }
  .scrollable-div > div {
    overflow-x: auto; /* 滚动行为转移到内层 */
    white-space: nowrap;
    /* 隐藏滚动条 */
    scrollbar-width: none;
  }
  .scrollable-div > div::-webkit-scrollbar {
    display: none;
  }
  .scroll-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    pointer-events: none;
  }
  .scroll-overlay-left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
  }
  .scroll-overlay-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
  }

  JavaScript 逻辑需同步更新监听目标：将 scroll 事件绑定到内层滚动容器（而非外层），并准确读取其 scrollLeft 和 scrollWidth：

  const scrollContainer = document.querySelector('.scrollable-div > div');
  const scrollOverlayLeft = document.querySelector('.scroll-overlay-left');
  const scrollOverlayRight = document.querySelector('.scroll-overlay-right');
  
  function updateOverlayVisibility() {
    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
    const canScrollLeft = scrollLeft > 0;
    const canScrollRight = scrollLeft < scrollWidth - clientWidth;
  
    scrollOverlayLeft.style.display = canScrollLeft ? 'block' : 'none';
    scrollOverlayRight.style.display = canScrollRight ? 'block' : 'none';
  
    // （可选）实现渐变宽度动画：根据滚动比例缩放 overlay 宽度
    const progress = Math.min(scrollLeft / (scrollWidth - clientWidth), 1);
    const width = Math.max(10, 50 * (1 - progress)); // 左侧随右滑减小，右侧反之
    scrollOverlayLeft.style.width = `${width}px`;
    scrollOverlayRight.style.width = `${width}px`;
  }
  
  // 初始检查 + 滚动监听
  updateOverlayVisibility();
  scrollContainer.addEventListener('scroll', updateOverlayVisibility);

  ⚠️ 注意事项：

  • 确保覆盖层 DOM 元素位于内层容器中（如示例），但其 position: absolute 仍由外层 relative 触发，这是实现“视觉固定”的前提；
  • pointer-events: none 必须保留，避免覆盖层阻挡按钮点击；
  • scrollWidth - clientWidth 是判断是否可继续滚动的准确依据（而非 scrollWidth 单独比较），否则在内容刚好填满时会误判；
  • 若需响应式适配，建议将 50px 覆盖层宽度设为 CSS 变量（如 --overlay-width: 50px），便于 JS 动态读取与控制。

  通过这种“定位容器 + 滚动容器”分离的设计模式，你不仅能稳定实现粘性滚动指示器，还能轻松扩展为分页导航、滚动进度条或自定义滚动控件等高级交互场景。