如何将元素的水平滚动条「锚定」在右侧？

我有一个包含大量内容的元素，带有水平滚动条，但浏览器默认将滚动条“附着”在左侧。由于内容靠右对齐，我希望滚动条在初始状态及窗口调整大小期间都固定在右侧。

我不想使用scrollLeft = scrollWidth这类JavaScript方案，因为它会产生卡顿，且需在多种场景下调用（如窗口调整、添加新元素后等）。

我更倾向于简单的CSS解决方案，比如direction: rtl;，它虽能实现滚动条需求，但会打乱内容布局（如反转列表顺序、padding-left样式失效）。

以下是示例代码，目标是让其中的div滚动条“吸附”在右侧：

原始CSS代码 #

div {
  border: 1px solid red;
  width: 200px;
  overflow: auto;
  padding-left: 100px;
  
  /* 能实现滚动条需求但会打乱布局，比如padding-left失效 */
  /* direction: rtl; */
}

ul {
  display: flex;
}

原始HTML代码 #

<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>
</div>

通过分层设置文本方向可以完美解决这个问题：给外层滚动容器设置direction: rtl来固定滚动条在右侧，同时给内部内容容器重置direction: ltr，恢复正常的内容布局和排列顺序，避免direction: rtl带来的布局混乱。

同时需要调整内边距的设置，因为direction: rtl会反转物理内边距的视觉位置，使用CSS逻辑属性或直接修改物理属性来保证内边距位置正确。

修改后的完整代码 #

CSS代码

div {
  border: 1px solid red;
  width: 200px;
  overflow: auto;
  /* 用逻辑属性适配方向，或直接写 padding-right: 100px */
  padding-inline-start: 100px;
  /* 让滚动条固定在右侧并初始滚动到最右 */
  direction: rtl;
}

ul {
  display: flex;
  /* 重置内容排列方向，避免列表反转 */
  direction: ltr;
}

HTML代码

<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>
</div>

关键细节说明 #

1. 滚动条位置：direction: rtl作用于滚动容器时，浏览器会自动将水平滚动条放置在容器右侧，并且初始滚动位置会定位到内容的最右端，无需额外JS控制。
2. 内容布局恢复：内部元素设置direction: ltr后，flex列表会保持从左到右的排列顺序，文本也恢复正常的左向排版，完全避免了direction: rtl导致的布局混乱。
3. 内边距适配：使用padding-inline-start这种CSS逻辑属性，会根据容器的direction自动调整内边距的视觉位置，比固定的padding-left更适配多语言场景；如果不需要考虑多语言，直接替换为padding-right: 100px也能达到相同的视觉效果。

内容的提问来源于stack exchange，提问作者kraftwer1