0

我得到了这个网站，其中有 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++ 会发生，这就是它不断滚动的原因（实际上是因为它会转到下一页）。它不应该在动画完成后执行此操作，而不是在执行过程中执行此操作吗？我很困惑..

4

2 回答 2

0

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

$(window).scrollTo('section#page-' + nextPage, 1000, {
    onAfter: function() {
        setTimeout(function() { isScrolling = false; nextPage++; }, 100);
    }
});
于 2014-07-16T09:22:45.970 回答
0

最好的选择是jQuery.ScrollTo 插件。

它非常容易设置，并允许使用各种动画和表达您想要滚动的位置的方式。

你需要处理滚动事件，使用这个插件

两者结合，你就可以得到你想要的。

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

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

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

另一种选择是使用 jQuery 工具，但您应该将设计更改为类似于此 demo的内容。这不是您要求的，但我认为它提供了更好的用户体验。

于 2012-09-20T00:29:11.417 回答