CODEWITHSUNDEEP
androidjqueryioscss
dcp3450
dcp3450

Reputation: 11187

Mobile (android & ios) browsers are ignoring overflow hidden on body, html, and container

My site has a few overlays (lightboxes) and I need to prevent the page scrolling underneath them when they are open. So I use a bit of jQuery to add overflow: hidden; to body, html, #page. This works fine on desktop browsers but mobile browsers don't seem to follow the rules.

My page structure is:

<html>
     ...
     <body>
          <div id="page">
          ...
          </div>
     </body>
</html>

My jQuery just puts the class on the three elements when a trigger is clicked. jQuery is working (applying the style) and I'm not getting any errors.

is there a known bug and/or a known fix?

Upvotes: 2

Views: 2399

Answers (2)

adamj
adamj

Reputation: 4782

Here is my own implementation.

I had issues with overflow not working properly whilst the offcanvas menu was active. The way I overcame the issue was to apply both overflow: hidden and position: fixed on the html, body and #page tags, which forces a noscroll on anything but the menu itself.

Hope it helps someone!

HTML:

<header id="masthead">
  <button type="button" class="toggle">Toggle</button>
</header>
<nav id="offcanvas-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div id="page">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque erat vel massa porttitor, ac sagittis velit vehicula. Nunc iaculis sapien justo, ac viverra mi convallis et. Sed ac massa lacinia, varius neque et, varius mi. Integer in ligula vitae arcu mollis mollis ut a tortor. Fusce quis tellus fringilla, venenatis arcu posuere, suscipit libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus hendrerit sodales leo, ac pellentesque odio fermentum nec. Ut feugiat in tortor quis cursus. Praesent porttitor imperdiet orci. Morbi sed ultricies velit. Nulla maximus rhoncus congue.</p>
  <p>Proin nec pharetra tortor, eu sollicitudin ipsum. Morbi turpis magna, feugiat ornare pretium a, tristique ac urna. Phasellus rutrum sem a turpis tincidunt viverra in eget odio. Mauris a nibh eget lacus volutpat lobortis. Sed convallis posuere nisl, id blandit est posuere a. Duis tempor euismod nunc, ut suscipit ligula feugiat in. Phasellus congue nibh non vulputate consectetur.</p>
</div>

LESS:

html.offcanvas-active,
html.offcanvas-active body
html.offcanvas-active #page {
    overflow: hidden;
  position: fixed;
}

html.offcanvas-active {
  #masthead,
  #page {
    -webkit-transform: translate(-250px);
      -moz-transform: translate(-250px);
        transform: translate(-250px);
  }
  #offcanvas-menu {
    right: 0;
  }
}

body {
  font-family: Arial, sans-serif;
}

#masthead {
  .toggle {
    float: right;
  }
  &:after {
      visibility: hidden;
    display: block;
      content: "";
    clear: both;
  }
}

#masthead,
#page {
  position: relative;
  -webkit-transition: transform 1s ease-in-out;
    -moz-transition: transform 1s ease-in-out;
      transition: transform 1s ease-in-out;
}

#offcanvas-menu {
  position: fixed;
    top: 0; right: -250px;
  width: 250px; height: 100%;
  background-color: orange;
  -webkit-transition: right 1s ease-in-out;
    -moz-transition: right 1s ease-in-out;
      transition: right 1s ease-in-out;

  ul {
      margin: 0; padding-left: 0;
    list-style: none;

    li {
      a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #fff;
      }
    }
  }
}

JS/jQuery:

$(document).ready(function() {
  $('#masthead').on('click', '.toggle', function() {
        $('html').toggleClass('offcanvas-active');
  });
});

Upvotes: 0

Matijs
Matijs

Reputation: 3148

Used roughly the same idea but setting a class of noscroll instead of applying styling directly to the element.

.noscroll { overflow: hidden; }

that used to work, if I remember correctly, up until iOS 7.

Did a bit of experimenting and it seems that this does the trick.

.noscroll { overflow: hidden; position: fixed; }

Upvotes: 2

Related Questions