How to freeze on iphone



  • We need to turn the page on the button. When repressed on the same button, the wire shall be re-engineered.

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

    For iphone only, when overflow is hidden; applied to body and to html, but when the door is activated, it starts from the beginning of the page, not from where it was switched off.

    Tell me, please, some incredibly resource-intensive trick to do this.

    For illustration or coding-- 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 so much for your revolt!



  • No response code. I've got the idea of who's interested, the bottom of it. The main problem is, when the locking was blocked, the screen would be gone.

    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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2