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
Aucun commentaire:
Enregistrer un commentaire