如何为水平滚动添加动态覆盖指示器答案

【问题标题】：How to add dynamic overlay indicators for horizontal scrolling如何为水平滚动添加动态覆盖指示器
【发布时间】：2022-02-15 17:35:40
【问题描述】：

让用户知道元素是可滚动的最不言自明的方法之一是在容器的可滚动端使用某种淡入淡出的覆盖。我想知道如何以干净的方式完成。

我希望元素只有在有更多内容要滚动到时才具有覆盖，我已经看到了具有固定褪色覆盖但 IMO 不完美的示例。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用绝对定位的::before 和::after 伪元素。这是结构：

<div className="outer-container"> <!-- overflow-x: hidden -->
  <div className="inner-container"> <!-- flex & overflow-x: scroll -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ...
  </div>
</div>

.outer-container {
  overflow-x: hidden;
  position: relative;
}
.outer-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(to right, #fff, transparent);
  width: 3rem;
}
.outer-container::after {
  /* same */
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
  /* same */
}
.inner-container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}

我们使用两个容器的原因是我们需要保持绝对元素 (::before & ::after) 静止，并防止它们与可滚动的内部容器一起移动。

为了让用户知道他/她在元素边界的末端，我们可以使用下面的逻辑：

在以下情况下显示左侧覆盖：.scrollLeft > 0
在以下情况下显示右叠加：.offsetWidth + .scrollLeft < .scrollWidth

这样当用户滚动到可滚动容器的开头或结尾时，这些叠加层就会隐藏。

我用 react 和 styled-components 做了一个例子，你可以在这里看到：https://codesandbox.io/s/horizontal-scroll-with-overlay-elements-uhec0?file=/src/App.tsx

【讨论】：