如何暂停页面内的内容？答案

【问题标题】：How to pause on a content within a page?如何暂停页面内的内容？
【发布时间】：2013-08-23 18:21:29
【问题描述】：

一旦滚动到达该部分，我希望某个页面在特定内容上停止。只有在满足特定条件后才会继续滚动（即绘制某些东西，单击该 div 中的某些内容等）

你是如何做到这一点的？有任何想法吗？谢谢。

【问题讨论】：

【解决方案1】：

您可以通过在文档滚动上绑定处理程序并调用 e.preventDefault() 来阻止默认滚动操作。

这里，contentPos 是要停止滚动的 y 位置，以像素为单位，与 $(document).scrollTop() 进行比较。

$(document).
    bind( 'mousewheel DOMMouseScroll', function ( e ) {

        contentYPos = 500;
        conditionMet = false;

        if ($(document).scrollTop() >= contentYPos
            && conditionMet == false 
            && e.originalEvent.wheelDelta < 0) {

               e.preventDefault();
        }
    });

这将检查您的 conditionMet 是否为假，并且如果用户向下滚动（假设您希望窗口仍然能够向上滚动），它将覆盖该操作，直到满足条件。

这是一个 js fiddle 展示了这个工作：http://jsfiddle.net/cMKh2/

编辑：包括一个在窗口滚动时触发的更全面的版本。（两种方法都包含在内以进行比较）。

http://jsfiddle.net/cMKh2/2/

Edit2：通过按钮按下和动态滚动距离改变条件的最终版本。

http://jsfiddle.net/cMKh2/4/

【讨论】：

这是假设您知道到达应该停止的位置之前的长度。我的计划是在一篇文章上实现这一点，然后一旦它通过滚动看到容器，它就会停在那里。另外，当有 else 语句时，这是如何工作的，以便在满足条件后继续执行？
将 contentYPos 替换为 $("#element").offset().top，它会动态停止。这是一个显示你想要什么的小提琴。它将在蓝色元素处停止滚动，直到单击按钮，这会将 conditionMet 变量更改为 true。这可以防止滚动锁定。希望这应该是你想要的！ jsfiddle.net/cMKh2/4
嗯...这很接近我想要的。但还有一件事，是否可以在滚动进行之前计算滚动？我计划检测滚动事件而不是点击事件。
我尝试在我自己的标记上实现您的代码。这似乎不起作用。看这里：jsfiddle.net/ralphcarlo/8xCtJ/1 请注意，我使用的是 Foundation 框架，因此使用了巨大的 css 代码块。