位置:-webkit-sticky仅在Safari(12.1.1)上的flexbox子代中向上调整容器的高度 [英] position: -webkit-sticky works only uptill the height of the container within a flexbox child on Safari(12.1.1)

问题描述

位置:-webkit-sticky 使我的元素发粘，但直到我们向上滚动到容器的高度为止.滚动通过容器的高度后， sticky元素随页面一起滚动.这仅发生在Safari(我正在使用12.1.1版)中，并且在Chrome和Firefox中均能很好地工作.

The position: -webkit-sticky makes my element sticky but only until we scroll up to the height of the container. Once we scroll pass the height of the container then the sticky element scrolls along with the page. This happens only in Safari(I am using version 12.1.1) and works well in both Chrome and Firefox.

我已经尝试过使用 self-align:flex-start 之类的修复程序，但是并不能解决我的问题.

I have tried fixes like using self-align: flex-start, but it doesn't solve my problem.

这是代码

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <h1 class="sticky">Sticky Header</h1>
    <ul>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
  </aside>

</div>

.container{
  width: 600px;
  height: 400px;
  overflow: hidden;
  display: -webkit-flex;
}

.left{
  background: cyan;
}

.right{
  background: orange;
  overflow: auto;
  height: 100%;
}

.sticky{
  position: sticky;
  position: -webkit-sticky;
  text-align: center;
  top: 0;
  background: inherit;
}

这里是指向密码笔的链接.

Here is a link to a codepen.

https://codepen.io/AshwinLorung/pen/QXBRRb

在Safari和Chrome/Firefox中打开此链接，然后您可以看到行为上的差异.

Open this link in both Safari and Chrome/Firefox then you can see the difference in behaviour.

推荐答案

现在，我通过将粘性元素和内容包装在div中解决了该问题.但是我发现这是一种怪诞的方式.仍在等待适当的解决方案.

For now I solved the problem by wrapping the sticky element and content inside a div. But I find this to be a hacky way. Still waiting for a proper solution.

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <div class="wrapper">
      <h1 class="sticky">Sticky Header</h1>
      <ul>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
      </ul>
    </div>
  </aside>

</div>

这篇关于位置:-webkit-sticky仅在Safari(12.1.1)上的flexbox子代中向上调整容器的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！