javascript - 滚动捕捉到页面部分

Question

所以我在页面顶部附近有两个内容部分，我希望向下滚动到第二部分顶部附近的用户“滚动对齐”到一旦他们停止滚动，第二个的顶部。

我认为使用 jQuery 应该是可能的，但我一直没弄明白。这是我的示例:

• 没有我的尝试:http://codepen.io/jifarris/pen/gaVgBp
• 我失败的尝试:http://codepen.io/jifarris/pen/gaVgQp

基本上我无法弄清楚如何让它在滚动停止后只尝试滚动到该位置一次。有点吓坏了。

我喜欢最近推出的 scroll snap points CSS feature处理滚动捕捉，我几乎更喜欢使用它——至少对于支持它的浏览器——但它似乎只适用于占据视口(viewport)高度或宽度 100% 的元素，而且它似乎是为了在元素内滚动，而不是页面本身。

顶部有一个固定的高度，所以这真的可以用像素数来处理。

---

作为引用，这里是我尝试的代码的核心:

$(function() {
  $(document).on('scroll', function() {
    var top = $(document).scrollTop();
    if (top > 255 && top < 455) {
      $('html, body').animate({scrollTop: '356'}, 500);
      $('body').addClass('hotzone');
    } else {
      $('body').removeClass('hotzone');
    }
  });
});

Answer 1

KQI 的答案包含创建功能良好的部分滚动以用于您的应用程序/网页所需的大部分步骤。

但是，如果您只想自己做实验，进一步开发脚本，那么您要做的第一件事就是添加一个超时处理程序。否则，您的逻辑和滚动动画将触发滚动的每个像素并产生错误的弹跳效果。

我在这里提供了一个基于您的脚本的工作示例: http://codepen.io/anon/pen/QjepRZ?editors=001

$(function() {
  var timeout;
  $(document).on('scroll', function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      var top = $(document).scrollTop();
      if (top > 255 && top < 455) {
        $('body').animate({
          scrollTop: '356'
        }, 500);
        $('body').addClass('hotzone');
      } else {
        $('body').removeClass('hotzone');
      }
    }, 50);

  });
});

祝你好运!