Прокрутите до элемента, если вы делаете небольшой толчок или только импульс - PullRequest
Новая
       28

Прокрутите до элемента, если вы делаете небольшой толчок или только импульс

0 голосов
/ 27 марта 2019

Я пытаюсь прокрутить элемент автоматически, когда пользователь начинает прокрутку, т. Е. Дает лишь небольшой импульс или толчок прокрутки.Поэтому, когда пользователь начинает прокручивать страницу вниз, он должен автоматически переместить страницу вверх к следующему разделу.Если он начинает прокручивать обратно вверх, страница должна автоматически переместиться вверх на страницу к предыдущему разделу.Так или иначе, код, который у меня есть, просто перемещает все очень несогласованно.

Я бы хотел, чтобы свиток работал вот так: https://www.redlinespecialistcars.co.uk

Демонстрация jsfiddle здесь: https://jsfiddle.net/ch2Lg6vq

$(document).ready(function() {

  var browserheight = $(window).height();

  $(window).on('scroll', function() {

    $('.control-parent').each(function() {

      var scrollTop = $(window).scrollTop();
      var elementOffset = $(this).offset().top;
      var distance = (elementOffset - scrollTop);

      if (distance >= browserheight - 2) {
        $([document.documentElement, document.body]).animate({
          scrollTop: $(this).offset().top
        }, 1000);
      }

      if (distance <= browserheight - 2) {
        // do sthg else
      }

    }); // end for each
  }); // end on.scroll
}); // end document.ready
html,body{
  width:100%;
  height:100%;
  position:relative;
}
.control-parent{
  width:100%;
  height:100%;
  position:relative;
  background-color:#eeeeee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-parent">
1
</div>
<div class="control-parent">
2
</div>
<div class="control-parent">
3
</div>
<div class="control-parent">
4
</div>
...