Question

我正在创建一个具有flex水平滚动容器的网页。我想添加拖动功能以进行拖动/滑动以滚动，是否有解决方案？

.flex-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 400px;
}

.flex-child {
  margin-right: 10px;
  background-color: yellow;
  text-align: center;
  width: 200px;
}

<div class="flex-container">
  <div class="flex-child"> One </div>
  <div class="flex-child"> Two </div>
  <div class="flex-child"> Three </div>
  <div class="flex-child"> Four </div>
  <div class="flex-child"> Five </div>
  <div class="flex-child"> Six </div>
  <div class="flex-child"> One </div>
  <div class="flex-child"> Two </div>
  <div class="flex-child"> Three </div>
  <div class="flex-child"> Four </div>
  <div class="flex-child"> Five </div>
  <div class="flex-child"> Six </div>
  <div class="flex-child"> One </div>
  <div class="flex-child"> Two </div>
  <div class="flex-child"> Three </div>
  <div class="flex-child"> Four </div>
  <div class="flex-child"> Five </div>
  <div class="flex-child"> Six </div>
  <div class="flex-child"> One </div>
  <div class="flex-child"> Two </div>
  <div class="flex-child"> Three </div>
  <div class="flex-child"> Four </div>
  <div class="flex-child"> Five </div>
  <div class="flex-child"> Six </div>
</div>

在这里我添加了我创建的示例示例。我用CSS隐藏了滚动条，但我想拖动/滑动flex容器来滚动并查看所有flex-child。

Javascript / Jquery在Flex水平滚动div中添加鼠标并触摸可拖动/可滑动滚动div

0 个答案: