Below is a sample code. Sketched a small mobile menu with a switch, when you click on that, the content area shifts its side, and the mobile menu leaves on the left.

at the same time, a side scroll appears on the mobile device, I thought that the problem would be solved if I wrote overflow-x: hidden to my body , and it helped only on the PC, and on the mobile phone you can still slide the content backwards with your finger.

I know that you can additionally set position: fixed , but this is not my case since the menu switch icon is supposed to be fixed too. That is, when scrolling, stay in the upper left corner.

At the same time, when you click on it, the content will twitch and scroll to the top of the page. In general, this crutch is not my case.

Therefore, I would like to know how to get rid of the side sroll on a mobile device. Without using position: fixed for body

 $('.toggle').click(function() { if ($('.menu').hasClass('active')) { $('.menu, .content').removeClass('active'); } else { $('.menu, .content').addClass('active'); } }) 
 body { margin: 0; padding: 0; overflow-x: hidden; } .content { display: block; position: relative; height: 1000px; background: #ccc; transition: 500ms; transform: translate(0, 0); } .content.active { transform: translate(290px, 0); } .menu { display: block; position: fixed; left: 0; height: 100%; z-index: 1; width: 290px; background: #5fba7d; overflow-y: auto; transform: translate(-100%, 0); transition: 500ms; } .menu.active { transform: translate(0, 0); } .toggle { display: block; position: relative; width: 70px; background: #eee; padding: 10px 15px; box-sizing: border-box; cursor: pointer; } span { display: block; position: relative; height: 4px; width: 100%; background: #000; margin: 10px 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="menu"> <div class="menu-inner"> <h2>Меню</h2>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> ссылка <br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> </div> </div> <div class="content"> <div class="toggle"> <span></span> <span></span> <span></span> </div> Это область контента текст текст текст </div>

  • overflow-x: hidden; - PROPHESSOR
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1.0"> - PROPHESSOR
  • @PROPHESSOR is exactly the way it is written, google chrome browser touch devices quietly move the body sideways when the menu is active the content leaves the body, and no matter how I set the margin, left, transform offset ... - Yevgeny Shevtsov

2 answers 2

  1. Added extra wrapper to all content.
  2. Changed the transform property: translate3d (0, 0, 0);
  3. Fixed the menu in one position. Externally, the changes are almost imperceptible, but this allowed to get rid of the side scroll. Most likely it is enough to perform the first action.

 $('.toggle').click(function() { if ($('.content').hasClass('active')) { $('.content').removeClass('active'); } else { $('.content').addClass('active'); } }) 
 body { margin: 0; padding: 0; overflow-x: hidden; } .content { display: block; position: relative; height: 1000px; background: #ccc; transition: 500ms; transform: translate3d(0, 0, 0); z-index: 1; } .content.active { transform: translate3d(290px, 0, 0); } .menu { display: block; position: fixed; left: 0; height: 100%; z-index: 1; width: 290px; background: #5fba7d; overflow-y: auto; transform: translate(0, 0); transition: 500ms; } .toggle { display: block; position: relative; width: 70px; background: #eee; padding: 10px 15px; box-sizing: border-box; cursor: pointer; } span { display: block; position: relative; height: 4px; width: 100%; background: #000; margin: 10px 0; } wrapper { overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="wrapper"> <div class="menu"> <div class="menu-inner"> <h2>Меню</h2>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> ссылка <br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> </div> </div> <div class="content"> <div class="toggle"> <span></span> <span></span> <span></span> </div> Это область контента текст текст текст </div> </div>

    I don't seem to move, well, check it out

     $('.toggle').click(function() { if ($('.menu').hasClass('active')) { $('.menu, .content').removeClass('active'); } else { $('.menu, .content').addClass('active'); } }) 
     html, body { width: 100%; height: 100%; } body { margin: 0; padding: 0; overflow-x: hidden; } .content { display: block; position: relative; height: 1000px; background: #ccc; transition: 500ms; transform: translateX(0); overflow-x: auto; max-width: 100% } .content.active { transform: translateX(290px); } .menu { display: block; position: fixed; left: 0; height: 100%; z-index: 1; width: 290px; background: #5fba7d; overflow-y: auto; transform: translateX(-100%); transition: 500ms; } .menu.active { transform: translateX(0); } .toggle { display: block; position: relative; width: 70px; background: #eee; padding: 10px 15px; box-sizing: border-box; cursor: pointer; } span { display: block; position: relative; height: 4px; width: 100%; background: #000; margin: 10px 0; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="menu"> <div class="menu-inner"> <h2>Меню</h2>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> ссылка <br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/>ссылка<br/> </div> </div> <div class="content"> <div class="toggle"> <span></span> <span></span> <span></span> </div> Это область контента текст текст текст </div>