Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "analyzing the solution of jitter in the sliding of position:fixed in iOS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Two kinds of jitter

Why are there still two kinds of jitter?

In fact, I have encountered two kinds of jitter scenes, the first scene is the native jitter, the second scene is the h6 jitter.

Jitter of native

The front-end developer will open webview in app. At this time, the jitter in sliding when the position:fixed in iOS sucks at the bottom should be caused by native, and the whole viewport follows, so you can set the parameter bounce_disable (which may not always have this parameter, depending on whether there is a similar parameter for control) to 1 to prohibit the elastic effect of native, and then add this effect of H6. The-webkit-overflow-scrolling attribute helps us achieve this effect, which controls whether the element uses the scrolling springback effect on the mobile device.

Jitter of H6

Option one

/ / I am the suction head. Header {width:100%; height:50px; position:fixed; top:0px;} / / I am the part 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 am the suction bottom tail. Footer {width:100%; height:50px; position:fixed; bottom:0px;}

Explanation: the sliding part overflow-y:scroll;, so the part beyond the screen in the up and down direction will become scrolling mode and will not overflow, and then the height of the suction top and bottom here is 50, so the corresponding middle sliding part has padding-top:50px; and padding-bottom:50px; settings box-sizing:border-box; respectively, so the increase of padding will not increase the height of .main.

Option 2

Transform: translateZ (0);-webkit-transform: translateZ (0)

Explanation: add this attribute to elements that use position:fixed.

This is the end of the content of "analyzing the solution of sliding Jitter when position:fixed bottom suction in iOS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.