gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 09:42:24 28 4
gpt4 key购买 nike

我有一个 wrapper div.container里面是div.children .我正在设置position:sticky在第一个 child 身上。我在 direction:ltr 上工作正常,但是在 direction:rtl粘性不起作用。
我不确定这是浏览器错误还是我的样式错误。请注意 我无权访问 html 本身 ,我只能改css文件,尽量不改js。
测试:
火狐 - 通过 ✅
谷歌浏览器 - 失败 ❌
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

最佳答案

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>

关于html - 位置粘性与方向 rtl 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58578298/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com