我使用这个 JavaScript,直到我的页面加载完成前会显示一个简单的图片。但是问题在于用户可以滚动页面,导致加载动画向上移动。我希望能够防止这种情况发生。有人能帮帮我吗?这是我使用的代码。在Linux(Ubuntu)中防止了滚动,但是在Windows中我仍然可以滚动。
我使用这个 JavaScript,直到我的页面加载完成前会显示一个简单的图片。但是问题在于用户可以滚动页面,导致加载动画向上移动。我希望能够防止这种情况发生。有人能帮帮我吗?这是我使用的代码。在Linux(Ubuntu)中防止了滚动,但是在Windows中我仍然可以滚动。
使用此方法禁用滚动:
无滚动
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
})
再次提醒,这是为了在页面加载完成或准备就绪后启用滚动:
滚动
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
})
如果有任何问题,请回复,虽然已在主要浏览器上进行了测试...
$('html')
就足够了。 - twigmac<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,则只需将样式标签放在与脚本标签相同的位置即可。
$(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>
你可以尝试在CSS中将这个放入你的父级div中
#mydiv {
overflow:hidden
}
现在在您的文档中添加以下内容:
$('#mydiv').css('overflow', 'auto');
OR
将此类添加到您的body中
.stop-scrolling {
height: 100%;
overflow: hidden;
}
position:fixed
和width:100%
以及height:100%
。 - Joe Simmons