滚动捕捉到页面部分

Question

因此，我在页面顶部附近有两部分内容，我希望向下滚动到第二部分顶部附近的用户在停止滚动后将其“滚动捕捉”到第二部分顶部。

我认为使用jQuery应该有可能，但我一直无法弄清楚。 这是我的示例：

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

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

我喜欢最近引入的滚动捕捉点CSS功能如何处理滚动捕捉，我几乎更愿意使用它-至少对于支持它的浏览器来说-但它似乎仅适用于占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'功能包装使滚动顶部动画化的任何逻辑，设置延迟（例如500mm）并检查滚动行为。 就像您知道的那样，您使用的“滚动”监听器会在每次像素变化时触发，您的脚本会变得疯狂和不稳定。 （这将是同时发生大量计算的时刻。Debounce会为您解决这一问题）

轻松：使过渡看起来很酷，而不仅仅是干脆的动作。

记住，用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);

  });
});

祝好运！