如何暂停网页中的内容？ [英] How to pause on a content within a page?

问题描述

我想让特定网页在特定内容停止后，滚动点击该部分。它只会在满足某个条件（例如，草图，点击div内的某些内容等）时继续滚动。

I want a certain page to stop on a particular content once the scroll hits that part. It will only proceed scrolling once a certain condition is met (i.e. sketch something, click something within that div, etc.)

如何使这种情况发生？有任何想法吗？感谢。

How do you make this happen? Any ideas? Thanks.

推荐答案

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

You can prevent the default scrolling action by binding a handler on document scroll, and calling e.preventDefault().

这里，contentPos是您要停止滚动的y位置，以像素为单位，与$（document）.scrollTop（）比较。

Here, contentPos is the y position in pixels where you want to stop scrolling, this is compared with $(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，如果用户向下滚动

This will check if your conditionMet is false, and if the user is scrolling down (presumably you want the window to still be able to scroll up), it will override that action until the condition is met.

这里是一个js小提琴显示这个工作： http://jsfiddle.net/cMKh2/

Here is a js fiddle showing this working: http://jsfiddle.net/cMKh2/

编辑：包含更全面的版本，在窗口滚动时触发。 （包含两种方法以供比较）。

Included a more comprehensive version which fires on window scroll. (Both methods included for comparison).

http：/ /jsfiddle.net/cMKh2/2/

编辑2：通过按下按钮更改条件的最终版本，以及动态滚动距离。

Final version with condition changed via button press, and dynamic scroll distance.

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

这篇关于如何暂停网页中的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！