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
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
Share Improve this question edited Oct 1, 2013 at 14:04 Anandu asked Sep 29, 2013 at 5:32 AnanduAnandu 791 gold badge2 silver badges6 bronze badges 1 |4 Answers
Reset to default 8Use 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...
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
<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.
if you do with css instead of js, just have the style tags in the same place that the script tags are placed
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>You can try to put this in your parent div in CSS
#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;
}
position:fixedandwidth:100%andheight:100%– Joe Simmons Commented Sep 29, 2013 at 5:42