Question

我想得到什么：向下滚动时转到包含内容的下一个div 向上滚动时转到包含内容的上一个div 我写了一些代码，但他的工作是巨大的跳跃滞后和冻结...... 我不知道我犯了什么错误。谁能帮帮我？

    var lastScrollTop = 0;

$('.wrapper').on('scroll', function () {
   var st = $('.wrapper').scrollTop();
   if (st > lastScrollTop){

     $(".wrapper").animate({
         scrollTop: $("#one").offset().top
     }, 600);

   } else {

     $(".wrapper").animate({
         scrollTop: $("#two").offset().top
     }, 600);

   }
   lastScrollTop = st;
});

编辑：所有必须像one一样工作。当滚动.wrapper div up or down
- ＆GT;转到包含内容的下一个/上一个div块

Answer 1

重要的是要意识到在滚动期间scroll事件会被触发很多，而不仅仅是滚动结束或滚动开始。这意味着.scroll()内的所有内容也会被触发相同的金额。特别是当将其与每次需要发生的动画混合时，这将导致开销。

最重要的是，当您触发新的滚动事件时，您将要结束上一个动画。为此，请使用jQuery的.stop()或finish()来停止制作动画。

看起来像这样：

var lastScrollTop = 0;

$('.wrapper').on('scroll', function () {
   var st = $('.wrapper').scrollTop();
   if (st > lastScrollTop){

     $(".wrapper").finish().animate({
         scrollTop: $("#one").offset().top
     }, 600);

   } else {

     $(".wrapper").finish().animate({
         scrollTop: $("#two").offset().top
     }, 600);

   }
   lastScrollTop = st;
});

要进一步优化，您可能希望限制触发事件的数量。这通常由throttling or debouncing完成。

在您的示例中，它看起来像这样，加上一些额外的清理：

var lastScrollTop = 0,
  wrap = $(".wrapper");

wrap.on('scroll', $.throttle(250, sectionMagnet));

function sectionMagnet() {
  var st = wrap.scrollTop();
  var el = (st > lastScrollTop) ? $("#one") : $("#two");

  wrap.finish().animate({
    scrollTop: el.offset().top
  }, 600);

  lastScrollTop = st;
}

带jquery的垂直滑块

1 个答案: