Prevent modal screen from scrolling in mobile safari

Question

Im working on a mobile page where I want to show a modal-like screen when a user orients to landscape mode. I am taking a div and basically making it cover up the screen but the problem is in safari the user can scroll to the top or bottom of the div and it makes the screen slide up and reveal what is underneath it and then bounce back.

The css for it looks like this

{
  div {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
} 

I have read answers that make it possible to disable this in the body but not for another element. Is this possible to disable this weird scrolling effect on a specific div or is there a work around for this?

Answer 1

Your CSS is invalid, but your close. The actual CSS needed to achieve what you wish would resemble this:

div {
    height: 100%;
    width: 100%;
    /* only the y axis (up down) has scroll and we only want that when the contents go out of bounds so the proper css property and value is to disable all scrolling just use the autoflow prop */
    overflow-y: hidden; 
  }

Answer 2

Try:

div {
    height: 100%;
 width: 100%;
overflow: hidden; 
position:fixed;
 }