javascript 如何防止滚动直到页面加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19074779/
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
How To Prevent Scrolling Until The Page Loads
提问by Anandu
I Use This JavaScript until my page loads it shows a simple image.but the problem is the users can scroll the page making the loading animation move up.i want to prevent this.anyone please help me.here is the code i use.Scrolling Is Prevented In Linux(ubuntu) But I am Able To Scroll In Windows
我使用此 JavaScript 直到我的页面加载它显示一个简单的图像。但问题是用户可以滚动页面使加载动画向上移动。我想防止这种情况。请帮助我。这是我使用的代码。Scrolling在 Linux(ubuntu) 中被阻止，但我能够在 Windows 中滚动
采纳答案by gwillie
if you do what @joe suggested, and there is no js available, and you dont have another css rule applied later on, then the screen will be unscrollable. better off having after body tag a script that is applied immediately
如果您按照@joe 的建议进行操作，并且没有可用的 js，并且您稍后没有应用其他 css 规则，则屏幕将不可滚动。最好在 body 标记后立即应用脚本
<body>
<script>
$('html, body').css({ 'overflow': 'hidden', 'height': '100%' })
</script>
...
markup blah blah blah
...
<script>
$('html, body').removeAttr('style')
</script>
</body>
and have another script at the bottom just before body tag to remove style attribute.
并在 body 标记之前的底部添加另一个脚本以删除样式属性。
if you do with css instead of js, just have the style tags in the same place that the script tags are placed
如果您使用 css 而不是 js，只需在放置脚本标签的同一位置放置样式标签
回答by wildbisu
Use this to disable scroll:
使用它来禁用滚动：
No Scroll
没有滚动
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
})
and again this to enable scroll after page load completes or page ready:
再次在页面加载完成或页面准备好后启用滚动：
Scroll
滚动
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
})
Revert back if any issues,though tested on major browsers...
尽管在主要浏览器上进行了测试，但如果有任何问题，请恢复...
回答by clavish
You need to add position fixed:
您需要添加位置固定：
$(window).load(function() {
$('body').css({'overflow':'auto', 'height':'auto', 'position':'relative'});
});body {
overflow: hidden;
height: 100%;
position: fixed;
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>回答by Rahul Tripathi
You can try to put this in your parent div in CSS
您可以尝试将其放在 CSS 中的父 div 中
#mydiv {
overflow:hidden
}
Now in your document add this:-
现在在您的文档中添加：-
$('#mydiv').css('overflow', 'auto');
OR
或者
Add this class to your body
将此课程添加到您的身体
.stop-scrolling {
height: 100%;
overflow: hidden;
}
