Question

我想要隐藏滚动条并按下按钮按水平滚动，将一列滚动到所需的方向。

但遗憾的是似乎无法让它发挥作用。

$('#left-button').click(function() {
  event.preventDefault();
  $('.row-fluid').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('#right-button').click(function() {
  event.preventDefault();
  $('.row-fluid').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

.row-fluid {
  overflow: auto;
  white-space: nowrap;
}

.row-fluid .col-lg-4 {
  display: inline-block;
  float: none;
  overflow-y: scroll;
  height: 700px;
}

.image-wrapper {
  display: block;
  width: 300px;
  height: 200px;
  background-color: black;
  margin: 0 auto;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="overflow: auto">
  <div class="row">
    <a href="javascript:;" id="left-button">left</a>
    <a href="javascript:;" id="right-button">right</a>
  </div>
  <div class="row-fluid">
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
    <div class="col-lg-4">
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
      <a href="" class="image-wrapper"></a>
    </div>
  </div>
</div>

PS我想使用bootstrap，因为它最终会响应。

Answer 1

我相信你应该把它想象成一个滑块/旋转木马。您需要（按层次顺序）：

包含overflow-x: hidden; position: relative。
内容的包装器，在容器内移动（左/右CSS属性position: absolute + jQuery animate，甚至CSS transitions）。＆GT;＆GT;这将是您示例中的.row，但不要使用.row-fluid，因为它将被绝对定位（它会弄乱您的.col宽度）。

有关滑块和旋转木马的大量在线内容，您应该查看一下。您还可以完全避免头痛，只需使用可以为您处理的JS库。

无论如何，我不会依赖jQuery的.scroll()进行左/右移动：这在移动设备上无法妥善处理。

我还建议您从移动布局开始，并将其扩展到更大的视口。专注于最简单的用户体验，其余的将很容易跟进。

此外，制作响应式布局仅处理几个CSS断点，您不一定需要Bootstrap。

如果我需要澄清一些事情，请告诉我！祝你好运！

按下按钮上的水平和垂直隐形滚动

1 个答案: