logo标签列表

如何防止页面加载前的滚动

javascriptjqueryhtmlscrollloading
7

我使用这个 JavaScript，直到我的页面加载完成前会显示一个简单的图片。但是问题在于用户可以滚动页面，导致加载动画向上移动。我希望能够防止这种情况发生。有人能帮帮我吗？这是我使用的代码。在Linux（Ubuntu）中防止了滚动，但是在Windows中我仍然可以滚动。

将其设置为 position:fixed 和 width:100% 以及 height:100%。 - Joe Simmons
4个回答
8

使用此方法禁用滚动：

无滚动

$('html, body').css({
  'overflow': 'hidden',
  'height': '100%'
})

再次提醒，这是为了在页面加载完成或准备就绪后启用滚动：

滚动

$('html, body').css({
  'overflow': 'auto',
  'height': 'auto'
})

如果有任何问题，请回复，虽然已在主要浏览器上进行了测试...

看起来 $('html') 就足够了。 - twigmac
1
如果您按照@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>

在底部body标签之前再加入一个脚本来删除style属性。

如果您使用css而不是js，则只需将样式标签放在与脚本标签相同的位置即可。

1
你需要添加 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>

0

你可以尝试在CSS中将这个放入你的父级div中

#mydiv {
    overflow:hidden 
}

现在在您的文档中添加以下内容：

$('#mydiv').css('overflow', 'auto');

OR

将此类添加到您的body中

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接