All geek questions in one place

IOS7 position: fixed; works ugly

I know iScroll, and I have been using jQuery mobile for a long time, and I know that both of them fixed this problem, but I want to do it myself and not include a big structure for this. My question is: how did jQuery Mobile fix this position: fixed; problem on iOS devies? Currently, all of my fixed positioned elements will change position only if the scroll is completed, but it should always be fixed at the top, and not just at the end of the scroll.

+4
source share
3 answers

I had the same problem. I had a fixed element over the body, and it was very bad. And it worked for me height:auto;instead height:100%. Full code:

body,
html{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto; /* iOS position:fixed; elements fix (not 100%) */
    min-height:100%;
    overflow-x:hidden;
}
+5
source

position:fixed on iOS 7 it works very well, actually (there are minor issues, for example, anti-aliasing may be a problem depending on certain factors), so I think you are probably trying to imitate a sticky scroll (where the element is corrected when scrolling to a certain y-offset )

Unfortunately for iOS you cannot do this easily (when scrolling or clicking, all JavaScript stops, so it position:fixedhappens at the end of the event. If you are lucky, you could hope for custom pans and position: fixed to touch ...)

, , (, iScroll). , (, ), .

iOS 7 position, sticky. , :

http://html5-demos.appspot.com/static/css/sticky.html
http://caniuse.com/css-sticky

, iOS 6.1 7. , , position:sticky , .

+2

Just try making your blocks using internal scrolling (overflow-y: scrolling) and place them as inline blocks next to each other. This way you get independent scrollable content.

0
source

Source: https://habr.com/ru/post/1532738/

More articles:


All Articles