Question

我希望下面的代码行为如下。 1.当scrollTop大于100时，它将移动到div1 2.当scrollTop大于div1.top位置+ 3时，它将移动到div2。我可以向上滚动，然后在向下滚动时对于1,2的行为相同。

目前它被困在div1中。有人可以帮忙解决这个问题吗？

$(window).scroll(function() {
  event.preventDefault();
  var div1 = $('#div1').offset();
  var div2 = $('#div2').offset();
  if ($(this).scrollTop() > 100) {
    //move to div1
    $('html, body').animate({
      scrollTop: div1.top
    },1000)
  }
  if ($(this).scrollTop() > div1.top + 100) {
    $('html, body').animate({
      scrollTop: div2.top
    },1000)
  }
});

Answer 1

您可以使用$.stop()来停止正在进行的动画处理您正在寻找的方案：

    $(window).scroll(function() {
setTimeout(function() {
  var div1 = $('#div1').offset();
  var div2 = $('#div2').offset();
  var page = $("html, body");
  if ($(this).scrollTop() > 50) 
  {
    page.stop();
    page.animate({
      scrollTop: div1.top
    },500);
  }
  if ($(this).scrollTop() > div1.top + 100) 
  {
    page.stop();
    page.animate({
      scrollTop: div2.top
    },500)
  }
  },1000);
});

示例：https://jsfiddle.net/Lb1wj47j/3/

Answer 2

每次用户滚动时，您的代码都会触发 - 您正在捕捉事件并将其向上滚动，然后才能超过100px才能达到div2。

您需要throttle或debounce处理程序 - 请参阅以下问题以获取实施和详细信息：

滚动jquery移动到div

2 个答案: