Question

我搜索的时间很长，但还没有找到解决方案。

我想滚动到滚动的下一个元素。

$(window).load(function(){

  var scroll = false;

  $(function() {
    //Create an Array
    var sites = $('.site');
    var position = 0; //Start Position
    var next = $('#next');
    var lastScrollTop = 0;

    $(window).scroll(function(event){
      if(scroll == false){
            scroll = true;
            $(document).off('scroll');
            var st = $(this).scrollTop();
            if (st > lastScrollTop){
              if (position !== sites.length - 1) {
                scrollToPosition(sites[position += 1]),5000;
              }
            } else {
              if (position !== 0) {
                scrollToPosition(sites[position -= 1]),5000;
              }
            }
            lastScrollTop = st;
          }
        });
      })

    function scrollToPosition(element) {
      if (element !== undefined) {
        scrollToElement($(element).attr('id'));
      }
    }

    function scrollToElement(selector, time, verticalOffset) {
      time = typeof(time) != 'undefined' ? time : 500;
      verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
      selector = "#" + selector;
      var element = $(selector);
      offset = element.offset();
      offsetTop = offset.top + verticalOffset;
      $('html, body').animate({
        scrollTop: offsetTop
      }, time);
      scroll = false;
    }
  });

html中有许多具有不同ID的

<div id="test" style="width:100%; height:100vh;" class="site">

</div>

因此容器全屏高度。当用户滚动一下时，他应该到达下一个容器。目前它滚动到最后或更多。

Answer 1

如果你可以在jsFiddle或CodePen中创建一个例子会有所帮助，但我要做的第一件事是在启动新的动画之前停止任何当前的jQuery动画：

$('html, body').stop().animate({
  scrollTop: offsetTop
}, time);

您应该记住，当用户滚动时，滚动处理程序会多次执行。

另外，无关 - 你的scrollToPosition调用在错误的地方有括号，应该是这样的：

scrollToPosition(sites[position += 1], 5000);

编辑：

可能导致问题的另一件事 - 只有在动画完成后才应取消设置'scroll'标志/变量，如下所示：

$('html, body').stop().animate({
  scrollTop: offsetTop
}, time, function () {
    scroll = false;
});

Javascript滚动到滚动上的元素

1 个答案: