Question

我有这个网站，其中有5个街区，每个人都有视口大小，100％宽度和100％高度。因此，当页面加载时，您可以看到第一个。其他的都在它之下。然后，当您向下滚动时，您会看到第二个，然后是第三个，依此类推，直到您到达最后一个所在页面的末尾。我在想是否有办法强制页面逐块滚动而不是默认的线性方式。我希望用户直接看到（好吧，不是直接，但动画，如果可能的话）第二个块，当他向下滚动而不是看到两个块之间的路。这些块就像不同的页面一样，没有点击任何地方（因为这将是我最简单的（也是唯一的）方式），我想逐页浏览它们，只需滚动即可。那可能吗？谢谢！

编辑：

我尝试使用scrollTo插件，但我也想不出来。让我们在用户向下滚动时更容易考虑。这就是我所做的：

var tempScrollTop, currentScrollTop = 0; // 2 vars to check if user scrolls down
var isScrolling = false;
var nextPage = 2 // I'm on 1st page, I want to show page 2 when user scrolls down;
$(window).scroll(function(){
  currentScrollTop = $(window).scrollTop(); // current position

  if (tempScrollTop < currentScrollTop && ! isScrolling ){ // if user scrolls down
    isScrolling = true; // animation in progress, shouldn't get into this 'if' till finished
    $(window).scrollTo('section#page-' + nextPage, 1000, {
        onAfter: function(){ isScrolling = false; nextPage++; }
    });
  }

  tempScrollTop = currentScrollTop; // update the current position
});

'if'语句检查用户是否向下滚动。从技术上来说它应该可以工作，但是在向我显示我想要的页面后，他只是转到下一个，然后是后一个，它一直向下滚动直到结束！做了一些测试，我已经看到应该在每个单一动画（这意味着单个整页滚动）之后执行的代码随机执行。我的意思是，isScrolling = false不会出现，而nextPage ++会这样做，这就是为什么它继续滚动（实际上它会转到下一页）。它不应该在动画完成后执行此操作，而不是在它进行时吗？我很困惑..

Answer 1

这样做的最佳选择是jQuery.ScrollTo plugin。

设置非常简单，并允许所有类型的动画和表达方式表达您想要滚动的位置。

您需要处理滚动事件using this plugin

两者结合，你得到你想要的东西。

要滚动到下一个或上一个元素，您应该跟踪当前可见的项目，以便能够转到下一个或上一个元素。

每当使用scrollTo时，您还需要跟踪滚动位置（sccrollTop属性），以便您可以猜测用户是向上还是向下滚动。

最后，您可能需要在用户开始滚动时设置“滚动标记”，并在停止滚动时设置取消设置，以便您知道在每次scrollTo移动后是否必须继续查看滚动位置。

另一种选择是使用jQuery工具，但你应该将设计更改为this demo之类的东西。这不是你要求的，但我认为它提供了更好的用户体验。

Answer 2

我认为根本原因是，当第一个动画停止并且未设置isScrolling时，无论如何都会触发滚动事件，因此您将获得另一个动画，直到页面到达底部。当动画停止时我试图取消设置滚动标记时，我遇到了这样的问题。一个简单的解决方案是延迟取消设置滚动标志，例如

$(window).scrollTo('section#page-' + nextPage, 1000, {
    onAfter: function() {
        setTimeout(function() { isScrolling = false; nextPage++; }, 100);
    }
});

jQuery - 滚动时控制页面

2 个答案: