时间戳

首页 > 解决方案 > 粘性元素在带有溢出的嵌套弹性容器中不起作用（野生动物园）

css - 粘性元素在带有溢出的嵌套弹性容器中不起作用（野生动物园）

问题描述

我在已overflow:auto启用的嵌套 flex 容器中遇到了这个奇怪的问题，即粘性元素。我期望粘性元素与第二个元素具有相同的高度，并且一旦滚动到阈值（top: 0），它也会粘在其包含元素的顶部。

请注意：这种行为在 Chrome/Edge/Firefox 中很好，但在Safari中不行。

据此，sticky应该在带有前缀的 Safari 中工作-webkit。( https://caniuse.com/?search=sticky )

有什么好方法可以在 Safari 中完成这项工作吗？

提前致谢。

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}
<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down
    </div>
    <div class="second">Here</div>
  </div>
</div>

对于遇到类似问题并想了解粘性的人的有用链接：

stackoverflow上的链接1

stackoverflow上的链接2

标签： cssflexboxsafaristicky

解决方案

这不是问题的完整答案，因为它涉及以一种可能不适合所有情况的方式更改 HTML，但是如果我们将第一个和第二个 div 中的每一个放在它们自己的容器中，那么 Safari（在 iPad IOS 14 上测试）做预期的事情。

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}
<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down</div>
    </div>
  <div class="container">
    <div class="second">Here</div>
    </div>
</div>

推荐阅读