CODEWITHSUNDEEP
jqueryioscss
Nick Maddren
Nick Maddren

Reputation: 583

Disable Scrolling on iPad, iPhone when fixed position div is active

So at the moment I am doing some iPhone and iPad testing and noticed a very annoying bug in relation to scrolling. So at the moment I have my basic page like so:

<body>
<div>
 Content of my website...
 <button>This button uses jQuery to add a class to the fixed-form div</button>
</div>
<div class="fixed-form">
 <form>
 </form>
</div>
</body>

This is a very basic HTML example that show my basic content area inside the body however I also have a div called fixed-form, when the button is pressed in the content area this then adds a class with the following styling to the fixed-form div:

  z-index:0;
  color:#fff;
  position: fixed;
  height: 100% !important;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  top:0;
  width:100%;
  z-index:999 !important;

The fixed-form div then covers the viewport. The issue is that the content/body behind the fixed-form is still scrollable and elements are still clickable. Surely the z-index would have stopped this from happening however it has not. Any idea why this might be happening? I would just like to completely disable all of the content that is not the fixed-form div to be disabled from scrolling and clickable.

UPDATE: So far I have tried adding overflow:hidden to the content div however this does stop horizontal scrolling but does not effect the vertical scrolling issue.

Thanks

Upvotes: 0

Views: 1341

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I've seached an exact cause of this... But can't find anything real clear.
Seems like z-indexes are managed differently on IOS wich give a high importance to the «stacking context».

Found this explanation:

(...) ultimately the stacking context of a positioned child is controlled by any ancestor that has a position defined and it is the z-index of that ultimate positioned ancestor that dictates where all the children will go. A positioned parent with a z-index of 1 becomes "atomic" and all its children will effectively be z-index 1 as far as elements outside that stacking context are concerned.

A solution I've seen in a couple forum answers for similar problem is to use CSS 3d translation instead of z-indexes.

You may try this on your fixed-form:

-ms-transform: translate3d(0,0,10);
-webkit-transform: translate3d(0,0,10);
transform: translate3d(0,0,10);

Wich is «equivalent» to z-index: 10.

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You should add class on body rather than div element. And add following css on body when div is active.

body.form-active {
    overflow: hidden;
    height: 100%;
}


$('button').click(function() {
  $('body').toggleClass('form-active');
});
body.form-active {
  height: 100%;
  overflow: hidden;
}
.fixed-form {
  background: #000;
  z-index:0;
  color:#fff;
  position: fixed;
  height: 100% !important;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  top:0;
  width:100%;
  z-index:999 !important;
  display: none;
}
.form-active .fixed-form {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
 Content of my website... Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...
 <button>This button uses jQuery to add a class to the body</button>
</div>
<div class="fixed-form">
  Form content Goes here...
  <button>This button uses jQuery to add a class to the body</button>
 <form>
 </form>
</div>
</body>

Upvotes: 1

Related Questions