It is necessary to disable the scrolling of the page when you click on the button. When you press the same button again, scrolling should turn on again.

I do this through overflow: hidden; for body / html and this trick works everywhere (all browsers on PC, phones on android), except iphone.

For iphone it turns out only when overflow: hidden; applied to the body, and to html, but then when you turn on scrolling, it starts from the beginning of the page, and not from the place where it was turned off.

Tell me, please, some simple and not resource-intensive trick for this.

For clarity or codepen - http://codepen.io/anon/pen/adLVar

$('#div_menu').click( function() { $('body').toggleClass('hide_page'); }); 
 body, html { margin: 0; padding: 0; } #div_menu { position: fixed; top: 0; left: 0; width: 50px; height: 50px; background: #000000; } #div0 { height: 2000px; width: 100%; } .hide_page { overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div_menu"> </div> <div id="div0"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p>x3</p> </div>

Thank you very much to the respondents!

    2 answers 2

    The code from the answer will not work. Finished the idea, who are interested, the result below. The main problem is that when the scroll is locked, the screen will leave.

     var scrollTop = 0; var newscroll = 0; $('#div_menu').click(function() { scrollTop = window.scrollY; $html = $('html'); if($html.hasClass('hide_page')){ } else {newscroll = scrollTop; }; $html.toggleClass('hide_page'); if($html.hasClass('hide_page')){ } else { window.scrollTo(0, newscroll); }; }); 
     body, html { margin: 0; padding: 0; height: 100%; } html.hide_page body { overflow: hidden; } #div_menu { position: fixed; top: 0; left: 0; width: 50px; height: 50px; background: #000000; } #div0 { height: 2000px; width: 100%; } .hide_page { overflow: hidden; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div_menu"> </div> <div id="div0"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p>x3</p> </div>

    • And another problem is that with the command window.scrollTo (0, newscroll); scrolled without address bar. Those. the top of the browser scrolls. Who knows how to fix? - enki

    You can be helped by simply saving the scroll value at the moment of opening the window and restoring its value at the time of closing the window, an example in the code.

     var scrollTop = 0; $('#div_menu').click(function(event) { scrollTop = window.scrollY; $('body').toggleClass('hide_page'); if($('body').hasClass('hide_page')){ window.scrollTo(0, scrollTop); }; }); 
     body, html { margin: 0; padding: 0; } #div_menu { position: fixed; top: 0; left: 0; width: 50px; height: 50px; background: #000000; } #div0 { height: 2000px; width: 100%; } .hide_page { overflow: hidden; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div_menu"> </div> <div id="div0"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p>x3</p> </div>

    • Thanks for the tip, below tested it. There is a problem that the screen "leaves" when the scroll is locked. - enki