[Original] fixed positioning head beat and iosfixed in IOS compatibility APP

[Original] fixed positioning head beat and iosfixed in IOS compatibility APP

Compatibility:

In the webview of the App, we sometimes write custom headers on the page, and use fixed to locate them. The effect we want is that the page slides no matter how it slides, this custom header is always fixed on the top, but in ios 11 or later versions, the problem arises. When we slide the page quickly, during Page scrolling, the head of the fixed positioning will slide along the page. The head will only appear after the slide operation is completed. This problem is not found in Android and iOS 11 or earlier versions.

Solution:

Directly control the page in a box to slide, and the head is absolutely positioned relative to the box. However, the side effect of such writing is that except for the element named wrapper, The scrollTop attribute value of other elements is always 0.

<Div class = "box" style = "position: absolute; top; 0; left: 0; right: 0; bottom: 0;-webkit-overflow-scrolling: touch; "> <div class =" head "style =" position: absolute; top; 0; left: 0; right: 0; "> Head </div> <div class =" wrapper "style =" position: absolute; top; 0; left: 0; right: 0; bottom: 0; overflow-y: scroll; "> <div class =" content "> <p> para </p>... <p> para </p> </div>