How To Prevent Scrolling Until The Page Loads

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中滚动

4 个解决方案

#1

-1

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>
<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,只需将样式标记放在脚本标记所在的相同位置即可

#2

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...

尽管在主流浏览器上进行了测试,但如果出现任何问

#3

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>

#4

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');

Add this class to your body

将此课程添加到您的身体

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

#1

-1