Question

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

将父级设置为自动溢出会阻止位置：粘性在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

我有一个类似的案例：

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

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

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

Answer 2

将display: block添加到.sticky-element对我来说很有效，而不必添加position: -webkit-sticky。在this Codepen找到了这个解决方案。

Answer 3

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

http://cssdeck.com/labs/bu0nx69w

基本上，右面板使用position:sticky而不是position:fixed。关键还在于您will-change:transform在父div中（在上述示例中，在.modal-content中），因此position:fixed相对于该父而不是视口是固定的。这是一个整洁的小把戏

Answer 4

只需添加position: -webkit-sticky;

Answer 5

position: sticky 将不起作用，如果您的父元素有 overflow: hidden。有了这个 sticky 设置，它会自动将您的元素从 relative to actual fixed 转换到文档的顶部边框。

Answer 6

我现在无法真正测试野生动物园，但是例如，在创建粘性页脚时，这一直是我的替代选择：

<!DOCTYPE html>
<html>
<head>
    <title>sticky side div</title>
    <style type="text/css">
        .maindiv{
            position: relative;
            display: inline-block;
            background-color: forestgreen;
            width: calc(100vw - 150px);
            height: 100%;
            overflow: auto;
        }
        .sidediv{
            position: fixed;
            display: inline-block;
            background-color: lightyellow;
            float: right;
            width: 100px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="maindiv">
        Lorem 45    
    </div>
    <div class="sidediv">
        Lorem 30
    </div>
    <div class="maindiv">
        Lorem 100
    </div>
    <div class="maindiv">
        Lorem 900
    </div>
</body>
</html>

一旦知道正确内容的宽度，再向其中添加更多像素，然后使用css calc function确保其他div不会流入

在Safari 7中，vh和vw也存在一个已知的错误。您可以通过设置height来解决此问题：在其父级为vh或vw宽的#child元素上继承

但如果您不希望获得跨浏览器支持，我的最佳建议是使用CSS Grids

Answer 7

似乎iPhone和Safari不允许使用简单的CSS解决方案，对我有用的是使用jQuery / javascript：给您需要粘稠的元素position:absolute和left: 0，然后使用javascript计算窗口向左偏移，然后将该偏移添加到元素的left属性：

#stickyElement {
        position: absolute;
        left: 0;
     }

  function scrolling(){
       $('.someElementScrollingLeft').on('scroll', function() {
           let offset = $(this).scrollLeft();
           /* For me it only didn't work on phones, so checking screen size */
           if($( window ).width() <= 768)
           {
              let stickyElement = $('#stickyElement');
              stickyElement.css("left", offset);
            } 
         });
   }

Answer 8

针对此特定情况的另一种解决方案，只要您不需要模态最右边的滚动条即可。

由于粘性元素的高度与.modal-content相同，因此可以从.sticky-element完全去除粘性。首先，从.modal-content中删除overflow：auto，然后将该样式添加到.left-content中，因为这始终是您要滚动的部分。

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

8 个答案: