html - CSS 位置 :sticky weird behavior in different browsers depending on overflow value of "html" and "body" tag

Question

这是在处理特定元素时发生的。我有一个带有以下 CSS 的 div:

div.my-div {
  position: sticky;
  top: 60px;
}

(其他样式也适用于它，不会影响与 position: sticky 相关的任何 css 值)。

当页面滚动并到达视口(viewport)顶部时，此 div 会变得粘滞，但随着滚动多一点会消失，就好像另一个粘滞元素正在替换它一样。出于测试目的，我注释掉了页面中的所有其他元素，只插入了一个具有足够高度以启用滚动的虚拟 div，并且行为保持不变。

此行为也仅限于 Chrome 和 Firefox(均为最新版本)，我无法在 Safari 中复制它。令人惊讶的是，这个 CSS 片段解决了这个问题:

html, body {
  overflow-x: hidden;
}

仅在 body 或 html 上将 overflow-x 设置为 hidden 无效，此修复导致其他 Safari-only 滚动相关的问题。

我最终通过使用 JS 更改 html 和 body 上的 overflow-x 的值解决了这个问题，具体取决于浏览器是 Safari或不。但是，我总体上对这种解决方案感到不舒服。其他人有类似的问题吗？关于可能导致此问题的任何想法，是否有任何解决方案不涉及检测它是否是 Safari 的 JS 片段？

Answer 1

position sticky 仍未在所有浏览器中得到广泛/完全支持。

A parent with overflow set to auto will prevent position: sticky from working in Safari

Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers.

是已知问题，您可以在 caniuse.com 上查看它的广泛支持和当前问题。

有可用的 polyfill，例如 stickfill但即使是这些也有其局限性。我用过 Stickybits过去 & 如果您想检查一下，我们会很惊喜。

stickybits('[your-sticky-selector]')