Two kinds of jitters
Why are there two kinds of jitters?
Actually, I have encountered two jitter scenes. The first scene is native jitter, and the second scene is h5 jitter.
native jitter
Front-end developers will open the webview in the app. At this time, the jitter of sliding when position:fixed is sucked in iOS. The entire viewport moves accordingly. Therefore, when generating the schema, the parameter bounce_disable (it may not necessarily have this parameter, it depends on whether there are similar parameters for control) is set to 1 to disable the elastic effect of native, and then add the effect of h5. The -webkit-overflow-scrolling attribute can help us achieve this effect, which controls whether the element uses the scrolling rebound effect on mobile devices.
h5's jitter
Plan 1
//I'm sucking the head.header{
width:100%;
height:50px;
position:fixed;
top:0px;
}
//I'm the part that wants to slide in the middle.main{
width:100%;
height:auto;
position:absolute;
padding-top:50px;
padding-bottom:50px;
box-sizing:border-box;
overflow-y:scroll;
}
//I'm sucking the bottom and the tail.footer{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
Explanation: The sliding part overflow-y:scroll; so the part that exceeds one screen in the up and down direction will become scroll mode and will not overflow. Then the heights of the ceiling and bottom are 50, so the corresponding middle sliding parts include padding-top:50px; and padding-bottom:50px; set box-sizing:border-box; so the increase of padding will not increase the height of .main.
Plan 2
transform: translateZ(0); -webkit-transform: translateZ(0);
Explanation: Add this property to the element using position:fixed.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.