jQuery - 滚动时控制页面

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

编辑：

我尝试使用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 
});

的“如果”语句检查，如果用户向下滚动。从技术上讲，它应该可以工作，但是在向我展示我想要的页面之后，他只是进入下一个，然后是后一个，并且它一直向下滚动直到结束！做了一些测试，我发现应该在EVERY SINGLE动画之后执行的代码（这意味着一个整页滚动）随机执行。我的意思是，isScrolling = false不会发生，而nextPage ++会这样做，这就是它继续滚动的原因（事实上它会进入下一页）。它不应该在动画完成后执行此操作，而应该在它正在进行时进行？我很困惑..

来源

2012-09-20 joeguarino

有点像Acrobat Reader在将其设置为非连续模式时的工作方式？ – Barmar

默认情况下隐藏块，除了第一个。当用户滚动块的高度时，显示下一个块。如果你愿意，你可以将它制作成动画。不知道这是你在说什么... – donutdan4114

@Barmar种，但有点不同因为我仍然希望滚动时的动画，但到达网页时停止。 – joeguarino

最好的选择是jQuery.ScrollTo plugin。

这是非常容易设置，并允许所有类型的动画和表达你想要滚动的方式。

而且你需要处理滚动事件，using this plugin

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

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

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

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

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

来源

2012-09-20 00:29:11 JotaBe

听起来不错，谢谢。可能以这种方式，我会得到我正在寻找的东西。我已经知道scrollTo，因为我在一些项目中使用它，从来没有听说过其他插件。但我应该以哪种方式将它们结合起来？一个可能的解决方案怎么可能？谢谢！ – joeguarino

您必须编写一些代码来跟踪当前可见面板和当前滚动位置。然后，当用户开始向上或向下滚动（开始事件，检查新位置）时，使用滚动到转到下一个或上一个面板。您可以在面板之后保持滚动面板，直到他停止滚动（另一个事件）。您也可以在停止滚动事件之后调整最终位置，以确保即使其他事情失败，滚动也应该在该位置。参见版本。 – JotaBe

我感谢你的帮助JotaBe，我想我明白了你的意思，理论上我是这么做的，但是我不能在代码中完成它。任何想法如何编码？特殊的滚动插件使用一个计时器，所以它不是非常可靠（我猜）和scrollTo是不够的..邓诺.. – joeguarino

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

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

来源

2014-07-16 09:22:45 ucdream

jQuery - 滚动时控制页面

回答

相关问题