位置粘性与方向 rtl 不起作用

Question

我有一个包装器div.container，里面是div.children。我在第一个孩子上设置position:sticky。我在direction:ltr 上工作得很好，但是在direction:rtl 上粘不工作。

我不确定这是浏览器错误还是我的样式有误。请注意我没有访问html本身的权限，我只能更改css文件而没有js尽可能。

测试于：

Firefox - 通过 ✅
谷歌浏览器 - 失败 ❌
Safari - 失败❌

.container {
    margin: 10px;
    padding: 0;
    border: 1px solid #000;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 500px;
    position: relative;
  white-space: nowrap;
}
.container.ltr { direction: ltr; }
.container.rtl { direction: rtl; }

.children {
  display: inline-block;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0,0,0,0.08);
}
.children.sticky {
    position: sticky;
    background: #f30;
    color: #fff;
}

.container.ltr .children.sticky { left: 0; }
.container.rtl .children.sticky { right: 0; }

<div class="container ltr">
  <div class="children sticky">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
</div>

<div class="container rtl">
  <div class="children sticky">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
</div>

Chromium 错误报告
https://bugs.chromium.org/p/chromium/issues/detail?id=1140374

Answer 1

position: sticky 它的行为有一定的限制，请参考https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working

请检查position: fixed 是否符合您的目的。

.container {
    margin: 10px;
    padding: 0;
    border: 1px solid #000;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 500px;
    position: relative;
  white-space: nowrap;
}
.container.ltr { direction: ltr; }
.container.rtl { direction: rtl; }

.children {
  display: inline-block;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0,0,0,0.08);
}
.container.ltr .children:nth-child(2){
  margin-left: 102px;
}
.container.rtl .children:nth-child(2){
  margin-right: 102px;
}
.children.sticky {
    /* position: sticky; */
  position :fixed;
    background: #f30;
    color: #fff;
}

/*.container.ltr .children.sticky { left: 0; }
.container.rtl .children.sticky { right: 0; } */

<div class="container ltr">
      <div class="children sticky">1</div>
      <div class="children">2</div>
      <div class="children">3</div>
      <div class="children">4</div>
      <div class="children">5</div>
      <div class="children">6</div>
      <div class="children">7</div>
      <div class="children">8</div>
      <div class="children">9</div>
      <div class="children">10</div>
    </div>

    <div class="container rtl">
      <div class="children sticky">1</div>
      <div class="children">2</div>
      <div class="children">3</div>
      <div class="children">4</div>
      <div class="children">5</div>
      <div class="children">6</div>
      <div class="children">7</div>
      <div class="children">8</div>
      <div class="children">9</div>
      <div class="children">10</div>
    </div>

Answer 2

我也有同样的问题，但是表格滚动上面有一个粘性标题&所以作为现在的临时解决方案，我们可以使用一些 js 来重置滚动以按预期从右侧开始。

假设我们有一个 div，它有一个可滚动的表格和一个在我们向右/向左滚动时应该是粘性的标题

<div class="scrollable" data-scroll-reset>
    <div class="sticky">
        this should remain still no matter how we scroll to left/right
    </div>

    <table class="rtl">
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

<style>
    .scrollable {
        overflow-x: scroll;
    }

    .sticky {
        left: 0;
        right: 0;
        z-index: 1;
        position: sticky;
    }

    .rtl {
        direction: rtl;
    }
</style>

<script>
window.addEventListener('load', () => {
    document.querySelectorAll('[data-scroll-reset]').forEach((e) => {
        e.scrollLeft = 10000
    })
})
</script>

data-scroll-reset&rtl必须条件加，否则方向改成ltr会打乱滚动。

Answer 3

我遇到了同样的问题。 设法通过使用额外的容器 div 找到解决方法，这似乎在 Chrome (v93) 上运行良好，但在 Safari (v14.1.2) 中仍然失败，它以某种方式将粘性元素移动到左侧 (???)

.container {
  margin: 10px;
  border: 1px solid #000;
  overflow: auto;
  width: 500px;
  white-space: nowrap;
}

.container.ltr { 
  direction: ltr;
}

.container.rtl {
  direction: rtl;
}

.inner {
  display: inline-block;
}

.children {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(0,0,0,0.08);
}

.children.sticky {
  position: sticky;
  background: #f30;
  color: #fff;
}

.container.ltr .children.sticky { 
  left: 0;
}

.container.rtl .children.sticky {
  right: 0;
}

<div class="container ltr">
  <div class="children sticky">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
  <div class="children">8</div>
  <div class="children">9</div>
  <div class="children">10</div>
</div>

<div class="container rtl">
  <div class="inner">
    <div class="children sticky">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
    <div class="children">4</div>
    <div class="children">5</div>
    <div class="children">6</div>
    <div class="children">7</div>
    <div class="children">8</div>
    <div class="children">9</div>
    <div class="children">10</div>
  </div>
</div>

在我的真实用例中，有更多的粘性元素（例如每个子框中的文本），它们在 Safari 中也能以某种方式工作，但无法通过一个简单的示例来复制它。我还有一个粘性侧边栏，其行为与上面的示例相同。