Используйте jQuery для горизонтальной прокрутки div вперед и назад в цикле

Question

Я не смог найти ни одного сообщения об этом поиске в Google, что удивительно, я делаю предположение (возможно, глупое предположение), что мне нужно простое решение.

У меня есть div с дочерним элементом, которыйимеет ширину, превышающую область просмотра (на мобильном устройстве), у меня есть overflow-x: scroll для дочернего элемента, поэтому появляется горизонтальная полоса прокрутки.Я хотел бы использовать 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>