-webkit-overflow-scrolling打破绝对定位 [英] -webkit-overflow-scrolling breaks absolute positioning

问题描述

我正在构建一个页面，当它们以其他方式滚动离开屏幕时，需要有一些粘贴在页面顶部的元素。我设法使用 position：absolute 来做到这一点。一切都很完美，但它需要动力滚动。我将 -webkit-overflow-scrolling：touch 添加到可滚动区域的css中。这打破了一切。带有 position：absolute 的粘性元素现在只是滚动其余的内容。

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.

我的问题是：

为什么 -webkit-overflow-scrolling：触摸影响绝对定位，有没有解决方法？

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.

更新：我尝试使用位置：已修复而不是位置：绝对和 -webkit-overflow-scrolling 也打破了

UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling broke that too

更新：经过大量挖掘后，我发现了对此问题的引用这里和这里。但是，两种情况下唯一提出的解决方案是重构DOM，以便粘性元素不在可滚动区域中。在我的情况下，这是一件很难的事情，我宁愿不必这样做。自ios5以来有没有进展或者仍然是唯一的选择？

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?

推荐答案

关于最后一个问题 - 是的，ios5中存在问题。在可滚动区域之外提取绝对定位元素对我来说很好。

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.

这篇关于-webkit-overflow-scrolling打破绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！