css - Safari位置:粘性在overflow:auto元素中不起作用

Question

根据CanIUse的说法，position:sticky元素内的Safari和overflow:auto存在一个已知问题:

A parent with overflow set to auto will prevent position: sticky from working in 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。有没有变通办法可以使其在所有浏览器中正常工作？还是有一种我可以用来保持滚动性的方法，即使将鼠标光标移到粘性元素上也可以吗？

Answer 1

只需添加position: -webkit-sticky;