Here is the HTML setup I have...
body
.top
.content
The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets.
Even when I try adding overflow hidden to the body using jQuery on tablets, it doesn't always prevent the background from scrolling, even if it hasn't reached the end.
I would like to prevent the background page from scrolling when the popup is displayed on top. It should act as a new slide.
What would be the best approach in terms of structure, then CSS, and finally JavaScript to achieve this?
Demo: http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}