javascript 页面到达某个点后停止页面滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10484314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:02:41  来源:igfitidea点击:

Stop page scroll after the page reaches certain point

javascriptjquery

提问by user1184100

How can scroll be prevented after scrollTop reaches certain value say 150.

在 scrollTop 达到特定值(例如 150)后如何防止滚动。

$(window).scroll(function() {   
    if($(window).scrollTop() >=50)) {
       return false;    // basically don't scroll       
    }
});

回答by Selvakumar Arumugam

the .scrollTopset the scrollHeight using scrollTofunction. It doesn't scroll from x to y, It just goes to y.

.scrollTop使用设置scrollHeight属性scrollTo功能。它不会从 x 滚动到 y,它只是转到 y。

So basically you cannot stop the scroll as your event will be called after it is set to y. You can probably set the desired scrollHeightinside the handler after comparing the height.

所以基本上你不能停止滚动,因为你的事件将在设置为 y 后被调用。scrollHeight比较高度后,您可能可以在处理程序内部设置所需的值。

if($(window).scrollTop() >=50) 
{ 
    $(window).scrollTop(0); 
}

Note:using it on an element is bearable, but on window object will be annoying to the user. Above is just to show how it works.

注意:在元素上使用它是可以忍受的,但在 window 对象上会令用户感到厌烦。以上只是为了展示它是如何工作的。

Try scrolling in >> http://jsfiddle.net/KwgMj<< and see how annoying it can be.

尝试在 >> http://jsfiddle.net/KwgMj<< 中滚动,看看它有多烦人。

回答by undefined

$(window).scroll(function(e) {   
    if($(window).scrollTop() >=50)) {
      $(window).scrollTop(50)
    }
});

回答by Robin Castlin

Apart from the obvious question; why would you want this?

除了明显的问题;你为什么要这个?

I would suggest another approach.

我会建议另一种方法。

Have a wrapper which fills the entire window, have a certain height and use overflow-x: hiddenin css.

有一个填充整个窗口的包装器,具有一定的高度并overflow-x: hidden在 css 中使用。

This may and may not be what you're after though.

不过,这可能是也可能不是您所追求的。

If you wish to make a continuing site that allows you to keep scrolling for the next step, I'd suggest you to simply .slideDown()relevant content.

如果您希望创建一个允许您继续滚动下一步的持续站点,我建议您只使用.slideDown()相关内容。

The scroll is a really basic function which shouldn't be modified with for no good reason.

滚动是一个非常基本的功能,不应无缘无故地修改。

EDIT:
For a ipad specific solution, use a wrapper:

编辑:
对于特定于 ipad 的解决方案,请使用包装器:

<? if (strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
<!-- If iPad, add style -->
<style type="text/css">
    div#wrapper {
        height: 100%;
        overflow: hidden;
    }
</style>
<? endif; ?>

<body>
<div id="wrapper">
<!-- Content here -->
</div>
</body>