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

Question

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

我不确定这是浏览器错误还是我的风格有问题。请注意，我无法访问html本身，我只能更改css文件，而不能更改js。

测试时间：

Firefox-通行证✅
Google Chrome-失败❌
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>

铬虫报告
https://bugs.chromium.org/p/chromium/issues/detail?id=1140374

Answer 1

我遇到了同样的问题。设法通过使用一个额外的容器div找到了一个解决方案，这个容器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中也能以某种方式工作，但无法用一个简单的例子来复制。我还有一个粘性侧边栏，它的行为与上面的例子相同。

Answer 2

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 3

am也有同样的问题，但上面有一个粘性标题的表格滚动&因此，作为目前的临时解决方案，我们可以使用一些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时，它会扰乱滚动。