Safari位置：粘性在overflow：auto元素中不起作用

Question

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

父母将溢出设置为自动将阻止位置：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。有没有变通办法可以使其在所有浏览器中正常工作？还是有什么其他方法可以用来保持滚动性，即使将鼠标光标放在粘性元素上也可以？

Answer 1

只需添加 position: -webkit-sticky;

Answer 2

添加display: block到.sticky-element对我有用的，而不必添加position: -webkit-sticky. 在这个 Codepen找到了这个解决方案。

Answer 3

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

http://cssdeck.com/labs/bu0nx69w

基本上，代替position:sticky，position:fixed用于右侧面板。关键是你will-change:transform也在父 div 中（在上面的例子中，在.modal-content）中，因此position:fixed相对于该父级是固定的，而不是视口。这是一个巧妙的小技巧

Answer 4

我有一个类似的案例：

<div scroll>
    <div sticky />
    <list />
</div>

只需用一个 div 包裹滚动内容，就像一个魅力：

<div scroll>
    <div>
       <div sticky />
       <list />
    </div>
</div>