Question

因此，我的页面顶部附近有两部分内容，我希望对于已经向下滚动到附近的的用户，可以“滚动捕捉”到第二部分的顶部一旦他们停止滚动，第二个的顶部。

我认为应该可以使用jQuery，但我无法弄明白。以下是我的例子：

没有我的尝试：http://codepen.io/jifarris/pen/gaVgBp

我的失败尝试：http://codepen.io/jifarris/pen/gaVgQp

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

我喜欢最近推出的scroll snap points CSS feature如何处理滚动捕捉并且我几乎更喜欢使用它 - 对于支持它的浏览器，至少 - 但它似乎只适用于占用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

好吧，为了获得好的结果，你需要处理几件事情：性能，调用堆栈队列，缓动。

性能方面你应该放弃jQuery动画并使用VelocityJs，它可以提供更平滑的过渡，更好的每秒帧数（fps），以避免屏幕故障，特别是在手机上。

调用堆栈：您应该使用“debounce”函数包装任何逻辑来设置scrolltop的动画，设置500mm的延迟并检查滚动行为。你知道，你使用的'滚动'监听器会在每个像素变化时触发，你的脚本会变得疯狂和不稳定。（这将是同时进行如此多计算的时刻。去抖将为你解决这个问题）

缓和：让过渡看起来很酷，而不仅仅是干爽的运动。

请记住，Velocity的'缓和'始于'mina'。即

'Mina.easingFnName'

最后，你的逻辑可能是正确的，我现在在我的手机中无法调试它，但尝试简化它并立即处理一个问题，就像是

If ( top > 380 )  // debounce(...)

Answer 2

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

但是，如果您只是想自己试验，进一步开发脚本，首先要做的就是添加一个超时处理程序。否则你的逻辑，以及因此scrollAnimation，将触发滚动的每个像素，并创建一个错误的弹跳效果。

我在此提供了一个基于您的脚本的工作示例： 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);

  });
});

祝你好运！

滚动捕捉到页面部分

2 个答案: