luxiyalu / scrollable-overlay Goto Github PK
View Code? Open in Web Editor NEWA simple demo of solving the scrollable overlay problem with pure CSS
Home Page: http://www.luxiyalu.com/playground/overlay/
A simple demo of solving the scrollable overlay problem with pure CSS
Home Page: http://www.luxiyalu.com/playground/overlay/
This doesn't work iOS 9.3 iPhone.
I'm sorry for my English, I use the initial translation because I'm so tired testing this approach. If something is not clear for you, ask me I'll fix it later.
So...
This solutation doesn't work:
http://luxiyalu.com/scrolling-on-overlay/
Description:
1. A common problem
Description: the Approach works only in this case lost the ability to track the scroll event on the window object, due to "reset" of height of the body (equal to the height of the browser's window):
html, body {
height: 100%;
}
2. iOS Problem, Android partly
Description: Inside of the unit .background-content you can't use the property -webkit-overflow-scrolling: touch, what enables to smooth scrolling (without the initial iOS "clumsy" scrolling) and normalization of the scroll when focusing inputs (more info: http://stackoverflow.com/questions/25596960/issues-with-touch-scroll-on-ios-when-focusing-inputs). If you add the property, then scrolling will be through the pop-up for no scrolling blocks ( the blocks with fitting content in the visible area completely).
.background-content{
height: 100%;
overflow: auto;
}
3. The problem is only on iOS
Description: Inside of the .background-content or body (as the body element the property is inherited to the element .background-content and including others in it) when you use the property -webkit-overflow-scrolling: touch there is a problem with the overlay layers ( the z-index property ). If inside the .background-content element is... for example a block .header (styles listed below), when you open the pop-up the .header gets under a pop-up, despite the fact that its z-index bigger than the z-index of the pop-up.
Insight: replace .header from the .background-content or delete -webkit-overflow-scrolling: touch from body
html, body {
height: 100%;
}
body {
-webkit-overflow-scrolling: touch;
}
.overlay {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.overlay .overlay-content {
height: 100%;
overflow: scroll;
}
.background-content {
height: 100%;
overflow: auto;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 60px;
background-color: red;
}
<div class="overlay">
<div class="overlay-content"></div>
</div>
<div class="background-content">
<div class="header"></div>
</div>
Minor cons:
.overlay-content {
height: 100%;
overflow: scroll;
}
Insight: the approach works more or less stably without using -webkit-overflow-scrolling: touch and your plugins allow you to handle scroll event inside the .background-content element instead of body
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.