代码之家 › 专栏 › 技术社区 › Dan Lew

设置从右向左滚动条的正确方向

right-to-left scrollbar css html

Dan Lew · 技术社区 · 16 年前

我现在正在使用从右到左的布局(想想希伯来语或阿拉伯语)。在RTL中,页面通常水平翻转。但是,我不知道如何更改滚动条的方向。我假设滚动条应该出现在可滚动元素的左侧,而不是像在LTR布局中那样出现在右侧。

以下是滚动条仍显示在右侧的示例页面:

<html dir="rtl">
<body>
<div style="height: 100px; overflow: auto;">
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
</body>
</html>

滚动条的方向是浏览器的区域设置,因此不是我应该关心的问题,还是有方法设置滚动条的方向?

(我对实现我自己的javascript滚动条不感兴趣;如果事实证明这只是浏览器的一个限制,那么我宁愿接受它,而不是增加页面的复杂性。)

4 回复 | 直到 12 年前

Waleed Eissa 15 年前

我觉得这样做不是个好主意,我自己也是个阿拉伯人,当滚动条在左边的时候我觉得很烦人。

shamsieh76 12 年前

只需在身体标签上这样做:

<body dir="rtl">

只对IE有效。

火狐,Safari和Chrome是另一个故事,你需要一些javascript来让它工作。

Tomer Cohen 15 年前

没有标准的方法可以翻转页面滚动条的一侧,因为它是一个UI元素,而您只能控制页面内容(HTML)。

Pat 16 年前

您可以将dir属性添加到body标记,如下所示:

<body dir="rtl">

但问题是不同浏览器的行为不稳定。最新的浏览器会像您预期的那样从右向左翻转内容,但只有IE和Opera会将滚动条移到左侧。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前