如何使用 CSS 翻转滚动条位置？

使用 CSS 翻转滚动条位置

更改滚动条方向

CSS 没有提供从左到右或从右到右更改滚动条位置的直接方法反之亦然。但是，您可以使用间接方法来实现此目的。

右/左翻转

从左向右翻转滚动条：

1. 使用overflow-x: auto;定义一个包装容器。
2. 创建超出容器宽度的内容。
3. 使用direction: rtl;在包装容器上翻转滚动条。
4. 覆盖方向：ltr；防止文本翻转。

CSS:

<code class="css">.Container {
  height: 200px;
  overflow-x: auto;
}
.Content {
  height: 300px;
}

.Flipped {
  direction: rtl;
}
.Flipped .Content {
  direction: ltr;
}</code>

顶部/底部翻转

同样，要从下到上翻转滚动条：

1. 用overflow-y: auto;定义一个包装容器。
2. 创建超过容器高度的内容。
3. 使用变换：rotateX(180deg);在包装容器及其内容上将滚动条上下翻转。

CSS:

<code class="css">.Container {
  width: 200px;
  overflow-y: auto;
}
.Content {
  width: 300px;
}

.Flipped, .Flipped .Content {
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}</code>

以上是如何使用 CSS 翻转滚动条位置？的详细内容。更多信息请关注PHP中文网其他相关文章！