Question

令人惊讶的是，我找不到有关此谷歌搜索的任何帖子，我正在做出一个假设（可能是愚蠢的假设），尽管我需要的东西有一个简单的解决方案。

我有一个带有子元素的div，其宽度大于视口（在移动设备上），我有溢出-x：在子元素上滚动，以便出现水平滚动条。我想使用jquery为该元素的水平滚动位置设置动画，以便一旦到达末尾，它便会从左向右缓慢滚动，然后再次向后滚动，理想情况下是无限循环。

我有点不想发布此消息，因为我没有编写任何可贡献的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

1 个答案: