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

Posted 2023-03-05

【中文标题】位置粘性与方向 rtl 不起作用

【英文标题】：Position sticky with direction rtl not working

【发布时间】：2020-02-22 23:22:08

【问题描述】：

我有一个包装器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

【问题讨论】：

在 Chrome 上遇到同样的问题。你找到解决办法了吗？

即使在 Chrome 80 上甚至在 Safari 13 上也没有运气。这只适用于 Firefox。

不直接相关，但可能会在此讨论中提供一些尝试github.com/w3c/csswg-drafts/issues/865

【参考方案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>

【讨论】：

我在这里看不到2.

position: fixed; 会在用户垂直滚动时出现问题。我通过将position: sticky; 更改为position: absolute; 解决了我的问题，并像第二个孩子一样添加了边距。即使我解决了我的问题，direction: rtl; 上的这个 position: sticky 仍然应该由浏览器修复。 ?

这个建议的解决方案可能需要解决较小窗口上的垂直滚动问题

是的，这是一个值得注意的问题，如果这两个元素的父容器是可滚动的，那么问题将持续存在

【参考方案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会打乱滚动。

【参考方案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 中也能以某种方式工作，但无法通过一个简单的示例来复制它。我还有一个粘性侧边栏，其行为与上面的示例相同。