Safari 位置：粘性在溢出中不起作用：自动元素

Question

根据 CanIUse ，Safari 和 position:sticky 在 overflow:auto 元素中存在一个已知问题：

将溢出设置为 auto 的父级将阻止 position:sticky 在 Safari 中工作

但是，这是我需要的确切用例。我有一个可滚动的 div，它被细分为两列。右列应该是粘性的并且永远不会移动，即使滚动整个 div 也是如此。我在右栏中使用 position:sticky 的原因是我希望用户仍然能够使用右栏上的光标滚动左栏。这是我发现唯一有效的解决方案。

Firefox / Chrome 的一个工作示例在这里： http ://cssdeck.com/labs/zfiuz4pc 橙色区域在滚动时保持固定，但在 Safari 中却没有。

上面的示例对我的问题有一些不必要的包装，但我想尽可能接近地复制我想让这段代码在其中工作的环境。它的基本要点是我有这个：

 <div class="modal-content">
  <div class="left-content">
  </div>
  <div class="sticky-element">
  </div>
</div>

和CSS：

 .modal-content {
  display: flex;
  overflow: auto;
  flex-flow: row nowrap;
}

.left-content {
  flex: 0 0 300px;
}

.sticky-element {
  position: sticky;
  top: 0;
  right: 0;
  width: 200px;
}

同样，这适用于 FF/Chrome，但不适用于 Safari。有没有办法让它在所有浏览器中工作？或者即使将鼠标光标悬停在粘性元素上，我也可以使用其他方法来保持可滚动性？

原文由 accelerate 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我从其他人那里得到了这个解决方案：

http://cssdeck.com/labs/bu0nx69w

基本上，代替 position:sticky ，使用 position:fixed 作为右侧面板。关键是您 will-change:transform 在父 div 中（在上面的示例中，在 .modal-content 中）所以 position:fixed 相对于该父级变得固定，而不是视口。这是一个巧妙的小技巧

原文由 accelerate 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我必须在下面使用它才能在 Chrome 和 Safari 中工作：

 position: sticky;
position: -webkit-sticky;
display: block;

原文由 Ankush Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议