桌面设备上没有滚动条时如何滚动项目？

Question

我正在尝试制作一个具有多个溢出元素的容器（因此它们会滚动）。我只需一些代码就可以轻松做到这一点。

.container{
  display: flex;
  gap: 10px;
  overflow: auto;
  max-width: 300px;
}

.item{
  background-color: #ddd;
  padding: 4px;
  min-width: 100px;
}

<div class="container">
  <div class="item">
    <p>
       Item to be scrolled
    </p>
  </div>
  <div class="item">
    <p>
       Item to be scrolled
    </p>
  </div>
  <div class="item">
    <p>
       Item to be scrolled
    </p>
  </div>
  <div class="item">
    <p>
       Item to be scrolled
    </p>
  </div>
  <div class="item">
    <p>
       Item to be scrolled
    </p>
  </div>
</div>

如您所见，有一个滚动条，您可以使用它在元素之间移动并查看“容器”元素上包含的所有项目。

当我尝试隐藏滚动条时，问题就出现了。我在隐藏它时没有问题，但在隐藏项目时滚动项目时遇到问题。我注意到这个问题只出现在桌面设备上，而不出现在平板电脑或移动设备上。如果我尝试使用鼠标滚动项目，我将无法做到这一点。在平板电脑和移动设备上，使用手指即可滚动。

.container{
  display: flex;
  gap: 10px;
  overflow: auto;
  max-width: 300px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.container::-webkit-scrollbar{
  background: transparent;
  width: 0px;
}

.item{
  background-color: #ddd;
  padding: 4px;
  min-width: 100px;
}

<div class="container">
  <div class="item">
    <p>
       Item to be dragged
    </p>
  </div>
  <div class="item">
    <p>
       Item to be dragged
    </p>
  </div>
  <div class="item">
    <p>
       Item to be dragged
    </p>
  </div>
  <div class="item">
    <p>
       Item to be dragged
    </p>
  </div>
  <div class="item">
    <p>
       Item to be dragged
    </p>
  </div>
</div>

如何在没有滚动条的桌面设备上复制滚动，类似于平板电脑和移动设备，但使用鼠标？

我只想使用 CSS，但我愿意接受任何可以实现这一点的解决方案。

Answer 1

在 Google Chrome（以及许多其他浏览器）上，水平滚动需要两个条件：

• 1：屏幕（或盒子）必须聚焦。 （例如单击或使用选项卡）
• 2：使用滚轮时必须按住左移。 （有些鼠标内置水平滚动功能）

如果你转到你的示例，按 Tab 键，按住 Shift 并滚动，它会神奇地滚动。

现在，拖动鼠标时滚动已不再是桌面上的事情了。拖动鼠标时也无法垂直滚动。您将需要 Javascript 来解锁此功能。没有纯 CSS 可以为您完成此操作。

如前所述，您应该尝试查看此链接：鼠标单击并拖动而不是水平滚动条（查看子 Div 的完整内容）

在 YouTube 上，您还可以找到大量教程来帮助您。

祝你好运！