6

我使用这个 JavaScript 直到我的页面加载它显示一个简单的图像。但问题是用户可以滚动页面使加载动画向上移动。我想防止这种情况。任何人请帮助我。这是我使用的代码。滚动在 Linux(ubuntu) 中被阻止，但我能够在 Windows 中滚动

4

4 回答 4

8

使用它来禁用滚动：

无滚动

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

并再次在页面加载完成或页面准备好后启用滚动：

滚动

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

如果有任何问题，请恢复，尽管在主要浏览器上进行了测试......

于 2013-09-29T05:44:15.600 回答
1

您需要添加固定位置：

$(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>

于 2015-02-03T13:55:42.890 回答
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 标记之前的底部有另一个脚本以删除样式属性。

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

于 2013-09-29T06:41:11.147 回答
0

您可以尝试将其放在 CSS 中的父 div 中

#mydiv {
    overflow:hidden 
}

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

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

或者

将此课程添加到您的身体

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
于 2013-09-29T05:41:58.710 回答