如何使用CSS更改滚动条位置？

有没有办法用CSS从左到右或从下到上更改滚动条的位置？

html css scrollbar

— 莫森野生动物园
source

浏览器的滚动条？

— Awais Umar

试试这个插件jscrollpane.kelvinluck.com这个jquery插件将允许您在滚动条上执行自定义的CSS。

— Awais Umar

我唯一能想到的就是拥有一个自定义滚动条和样式，以使其随心所欲地定位。@AwaisUmar建议的jscrollpane插件是我过去使用过的东西，是一个不错的开始。

— Zhihao 2013年

而是所有浏览器，但是如果您知道特定的浏览器，请告诉我们

— Mohsen Safari

使用纯CSS无法做到这一点。

— 伊泰

Answers:

125

仅使用CSS：

左右翻转：工作小提琴

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

顶部/底部翻转：工作小提琴

.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 */
}

— 阿夫拉罕库尔
source

我没有div在顶部/底部翻转小提琴的Chrome 29中看到翻转的顶部滚动条。

— Mathijs Flietstra

显然，这是一个浏览器错误。我已经在答案中更新了我的小提琴。现在检查。

— avrahamcool

在Google Chrome 35.0.1916.153中，当我两次旋转时，输入/选择存在一些问题。在FF中，一切正常。

— lechup14年

@lechup您可以张贴小提琴吗？我们将尽力提供帮助。

— avrahamcool

我刚发现一个错误（在Edge上）。如果翻转的内容的每个行上都包含一个带有复选框的表，则指针事件将变得混乱。如果选择最后一个复选框，它将选择第一个，反之亦然。参见小提琴jsfiddle.net/uPwfn/646

— James Cazzetta

这里是另一种方式，通过rotating element与scrollbar用于180deg,包装它content变成另一种元素，而rotating这wrapper对-180deg。检查下面的代码段

显示代码段

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

展开摘要

— 流程
source

聪明，但是至少在我的Linux firefox上，它具有交换处理程序和滚动条的inset / outset效果的副作用；这太令人困惑了。

— 马丁·图尔诺伊

看看这个回答者stackoverflow.com/questions/7889449/…–

— shaddad

@Carpetsmoker是的，固定了rtl和的ltr方向。因此它将具有本机滚动效果，scroll-down 从底部scroll-up到顶部

— The Process

是的，它是垂直固定的，但水平固定的。

— 马丁·图尔诺伊

试试看希望这可以帮助

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

— Piyush Arya
source

聪明的主意使用dir中学到了一些新东西，但我也需要

— 无止境