问题
I am building a page that needs to have some elements which stick to the top of the page when they would otherwise be scrolled off the screen. I managed to do this using position:absolute. Everything was working perfectly, but it needed momentum scrolling. I added -webkit-overflow-scrolling: touch to the css of the scrollable area. This broke everything. My sticky elements with position:absolute are now just scrolling with the rest of the content.
My question is this:
Why does -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this?
UPDATE: I added an alert whenever a child element becomes "fixed" or "unfixed". The alerts continue to fire, so the styling is still being applied, it just isn't working. This means that it's not a problem with keeping track of scroll position but rather a problem with the styling.
UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling broke that too
UPDATE: After a lot of digging, I found references to this problem here and here. However, the only proposed solution in both cases is to restructure the DOM so that the sticky elements are not in the scrollable area. This is a difficult thing to do in my case, and I would prefer not to have to. Have things progressed since ios5 or is that still the only option?
回答1:
On the last question - yes the issue is present in ios5. Extracting the absolute positioning element outside of the scrollable area worked fine for me.
来源：https://stackoverflow.com/questions/27320728/webkit-overflow-scrolling-breaks-absolute-positioning