Overflow -x hidden doesn't work on mobile

Question

I have a burger menu that on click it slides from the right. I have set the body and html to overflow-x:hidden; it works perfectly on tablet or desktop view but on the mobile view you can scroll on right and actually see the part of the navigation that was supposed to be hidden.

I have tried to wrap the body with a div and apply the overflow-x: hidden to that div but that did not work either. Also specifying the mobile size with @media queries and then applying the overflow on the body didn't work.

could anyone help me please?

edit: this person has the exact same problem as i do https://www.youtube.com/watch?v=5h2NwVIl4hU

have you tried: "-ms-overflow-style: none;" and "scrollbar-width: none;" at the body that way it stays scrollable for cellphones. — tacoshy, Aug 21 '20 at 22:13

Unbywyd · Answer 1 · 2020-08-21T22:38:32.300

First, see a similar question.

In addition, use transform for this task

https://jsfiddle.net/cLrkm8sf/

HTML:

<body>
   <a href="#menu">Open menu</a>
   <div class="menu" id="menu"></div>
</body>

CSS

.menu {
  width: 400px;
  height: 100vh;
  background-color: #CCC;
  transform: translateX(-100%);
}

.menu:target {
  transform: translateX(0);
  transition: transform .3s;
}

https://jsfiddle.net/6sre2mkz/

Another recommendation. In case of going beyond the screen, specify a fixed position, not an absolute.

CSS

.menu {
  right: -400px;
  position: fixed; /* not absolute */
  top: 0;
  bottom: 0;
  background-color: #CCC;
  height: 100vh;
  width: 400px;
}
.menu:target {
  right: 0;
}

https://jsfiddle.net/a2nurvpg/

Another example and no scrolling

HTML

<a href="#menu">Open</a>
<div class="menu" id="menu">
  <ul>
    <li><a href="#close">Close</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
  </ul>
</div>

CSS

.menu {
  right: 0;
  padding: 20px;
  box-sizing: border-box;
  transform: translateX(100%);
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  background-color: #CCC;
  height: 100vh;
  width: 400px;
  transition: transform .2s;
}
.menu:target {
    transform: translateX(0);
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu ul li {
    display: block;
}
.menu ul li a {
    display: block;
    padding: 10px 5px;
    color: #000;
    text-decoration: none;
}
[href="#close"] {
    font-size: 2em;
}

Overflow -x hidden doesn't work on mobile

1 Answers1