jquery 的垂直滑块

vertical slider with jquery

我想得到的: 向下滚动时转到下一个 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 向上或向下
-> 转到 next/previous div 内容块

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

最重要的是,您会希望在触发新的滚动事件时结束之前的动画。为此,请使用 jQuery 的 .stop() or 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;
}