如何暂停页面内容?

时间:2013-08-22 07:35:07

标签: jquery css3

一旦滚动到达该部分,我希望某个页面停止在特定内容上。它只会在满足某个条件后继续滚动(即草图,点击该div内的某些内容等)。

你是如何实现这一目标的?有任何想法吗?感谢。

1 个答案:

答案 0 :(得分:0)

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

这是一个显示此工作的小提琴:http://jsfiddle.net/cMKh2/

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

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

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

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