如何将整页滚动条设置在左侧？

为什么直接给html/body加direction:rtl无效？ #

浏览器的主视口滚动条并不完全属于body或html元素，它是浏览器视口的原生组件。单纯给这两个元素设置direction:rtl，只会改变内容的排版方向，不会直接触发视口滚动条位置的变更——多数浏览器会将视口滚动条的位置逻辑与元素内容方向做分离处理。

直接解决的CSS方案 #

不需要用额外的固定div替代，只需通过以下CSS设置，就能让主滚动条移到左侧，同时可按需控制内容的排版方向：

情况1：内容保持左到右（LTR）排版，仅滚动条在左侧

html {
  direction: rtl; /* 让滚动容器（html）的滚动条居左 */
  overflow-y: scroll; /* 强制显示滚动条，避免内容变化时的跳动 */
}
body {
  direction: ltr; /* 重置内容的排版方向为默认左到右 */
  margin: 0;
  width: 100%;
}

情况2：内容也需要右到左（RTL）排版

如果页面本身是RTL语言（如阿拉伯语、希伯来语），只需简化设置：

html, body {
  direction: rtl;
  margin: 0;
  overflow-x: hidden;
}
html {
  overflow-y: scroll;
}

原理说明 #

将html元素设置为滚动容器（通过overflow-y:scroll明确其滚动角色），同时给它加上direction:rtl，浏览器就会将这个容器的滚动条放在左侧。如果不需要内容变成RTL，再给body设置direction:ltr重置内容排版即可，滚动条的位置会继承html的设置。

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