时间戳

首页 > 解决方案 > 位置粘性与方向 rtl 不起作用

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

问题描述

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

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

测试：

Firefox - 通过 ✅<br /> Google Chrome - 失败 ❌<br /> Safari - 失败 ❌</p> 

.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

标签： htmlcss

解决方案

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>

推荐阅读