带有 jquery 的垂直滑块

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
-> 使用内容转到下一个/上一个 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;
}