jquery - 如何暂停页面内的内容？

Question

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

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

Answer 1

您可以通过在文档滚动上绑定(bind)处理程序并调用 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 是否为 false，如果用户正在向下滚动(假设您希望窗口仍然能够向上滚动)，它将覆盖该操作直到满足条件。

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

编辑:包括一个更全面的版本，它在窗口滚动时触发。 (包括两种方法以进行比较)。

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

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

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