水平滚动条在反应中不起作用

Question

我有一个像这样的scroll__cotainer div：

<div className="scroll__container">
            <div onClick={setBlackTheme} className="skin__option">
              <p>Black</p>
            </div>
            <div onClick={setBlueTheme} className="skin__option">
              <p>Blue</p>
            </div>
            <div onClick={setRedTheme} className="skin__option">
              <p>Red</p>
            </div>
            <div onClick={setYellowTheme} className="skin__option">
              <p>Yellow</p>
            </div>
            <div onClick={setGreenTheme} className="skin__option">
              <p>Green</p>
            </div>
          </div>

但是，当我将以下 css 应用于容器时，水平滚动条不起作用：

.scroll__container {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  line-height: 0;
  -webkit-overflow-scrolling: touch;
  /* transform: translate3d(0, 0, 0);
  position: sticky; */
  cursor: grab;
}

我在滚动条应该在的地方看到了这两个看起来很奇怪的灰色条：

我做错了什么？

Answer 1

水平滚动可以用更简单的 CSS 实现

.scroll__container {
  display: flex;
  overflow-x: auto;
}

Live demo

在触摸屏上滑动时使用原生水平滚动。它也适用于支持水平滚动的触摸板。

如果您希望它在单击鼠标按钮并拖动光标时滚动，没有简单的方法可以实现这一点。您需要使用 JavaScript 实现鼠标点击和移动处理程序，或者使用像 react-slick 这样的第三方库。

顺便说一句，您示例中奇怪的灰线是一个空滚动条 - 这是因为您使用 overflow-x: scroll; 强制显示滚动条，尽管元素没有溢出容器。