使用 jQuery 水平来回滚动 div 循环

Question

令人惊讶的是，我找不到任何关于此谷歌搜索的 post，我假设（可能是愚蠢的假设）我需要的是一个简单的解决方案。

我有一个 div，其子元素的宽度比视口宽（在移动设备上），我有 overflow-x: scroll 在子元素上，因此会出现水平滚动条。我想使用 jquery 为该元素的水平滚动位置设置动画，以便它缓慢地从左向右滚动，并在到达末尾时再次返回，理想情况下无限循环。

我有点不想 post 这是因为我没有任何 jQuery 可以贡献的东西，但我不确定从哪里开始。

HTML:

<div class="parent">
  <div class="wide_content"></div>
</div>

CSS:

.wide_content {
    width: 1200px;
    overflow-x: scroll;                            
    -webkit-overflow-scrolling: touch;
}

Answer 1

如果你想要一个无限的左右滚动动作，你可以使用，例如，JQuery animate() 函数和一个无限循环：

var scroll = function(width) {
  $('html, body').animate({
    scrollLeft: width,
  }, 2000);
};

var loopForever = function(delay, callback) {
  var loop = function() {
    callback();
    setTimeout(loop, delay);
  };
  loop();
};

loopForever(1000, function() {
  scroll($('.wide_content').width());
  scroll(0);
});

.wide_content {
  width: 1200px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="wide_content"></div>
</div>

使用 jQuery 水平来回滚动 div 循环

Use jQuery to scroll div horizontally back and forth on loop

jquery

scroll

overflow

scrollbar