Safari position:sticky not working in an overflow:auto element

问题

According to CanIUse, there is a known issue with Safari and position:sticky inside an overflow:auto element:

A parent with overflow set to auto will prevent position: sticky from working in Safari

However, this is the exact use case that I need. I have a scrollable div, which is subdivided into two columns. The right column should be sticky and never move, even when the entire div is scrolled. The reason I'm using position:sticky on the right column is that I want the user to be able to still scroll the left column with the cursor on the right column. And this was the only solution that I found to have worked.

A working example for Firefox / Chrome is here: http://cssdeck.com/labs/zfiuz4pc The orange area remains fixed while scrolling, but in Safari it doesn't.

The example above has some unnecessary wrappers to my issue, but I wanted to replicate as closely as possible the environment where I want to have this code working in. The basic gist of it is I have this:

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

And the 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;
}

Again, this works in FF/Chrome but not in Safari. Is there a workaround to get it to work in all browsers? Or is there a different approach I can use to maintain scrollability even with the mouse cursor over the sticky element?

回答1:

simply add position: -webkit-sticky;

回答2:

I got this solution from someone else:

http://cssdeck.com/labs/bu0nx69w

Basically, instead of position:sticky, use position:fixed for the right panel. The key is to also you will-change:transform in a parent div (in the above example, in .modal-content) so position:fixed becomes fixed relative to that parent, and not the viewport. It's a neat little trick

回答3:

i cant really test this for safari right now but this has always been an alternative for me when creating a sticky footer for example:

<!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>

once you know the width of your right content add a little more px to it then use the css calc function to make sure the other div's don't flow in to it

also there is a known bug with vh and vw in Safari 7. You can fix it by setting height: inherit on the #child elements whose parents have vh heights or vw widths

but my best recommendation if you were not going for cross browser support will be to use CSS Grids

回答4:

It seems iPhone and safari do not allow simple css solution, what worked for me was using jQuery/javascript: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:

#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);
            } 
         });
   }

来源：https://stackoverflow.com/questions/51792783/safari-positionsticky-not-working-in-an-overflowauto-element

标签

css

safari

overflow

sticky