【问题标题】:How to change scroll bar position with CSS?如何用 CSS 改变滚动条的位置?
【发布时间】:2013-09-30 14:53:20
【问题描述】:

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

【问题讨论】:

  • 浏览器的滚动条?
  • 试试这个插件jscrollpane.kelvinluck.com这个jquery插件可以让你在滚动条上自定义css。
  • 我唯一能想到的就是有一个自定义滚动条和样式,可以按照你喜欢的方式定位它。 @AwaisUmar 建议的 jscrollpane 插件是我过去使用过的,是一个很好的开始。
  • 所有浏览器,但如果您了解特定浏览器,请告诉我们
  • 纯 CSS 无法做到这一点。

标签: html css scrollbar


【解决方案1】:

仅使用 CSS:

右/左翻转:Working Fiddle

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

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

上下翻转:Working Fiddle

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

【讨论】:

  • 我没有在 Top/Bottom Flipping 小提琴的 Chrome 29 中看到翻转的 div 上的顶部滚动条。
  • 显然,它是browser bug。我已经在答案中更新了我的小提琴。立即检查。
  • 在 Google Chrome 35.0.1916.153 中,当我双倍旋转时,输入/选择存在一些问题。在 FF 中一切正常。
  • @lechup 你能发个小提琴吗?我们会尽力提供帮助。
  • 我刚刚发现了一个错误(在 Edge 上)。如果翻转的内容包含一个表格,表格的每一行都有复选框,那么指针事件就会变得混乱。如果您选择最后一个复选框,它将选择第一个复选框,反之亦然。见小提琴jsfiddle.net/uPwfn/646
【解决方案2】:

这是另一种方式,rotating elementscrollbar 表示 180deg,content 包装到另一个元素中,rotating 表示 wrapper 表示 -180deg。 检查下面的sn-p

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>

【讨论】:

  • 聪明,但至少在我的 Linux firefox 上,它具有交换处理程序和滚动条的插入/开始效果的副作用;这非常令人困惑。
  • @Carpetsmoker 是的,已修复 rtlltr 方向。所以它会有原生滚动效果,scroll-down 到底部,scroll-up 到顶部
  • 是的,它是垂直固定的,但不是水平的。
【解决方案3】:

试试这个。希望这会有所帮助

<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;
}

【讨论】:

  • 聪明的想法使用dir 学到了一些新东西,但我也需要顶部和底部
猜你喜欢
  • 1970-01-01
  • 2010-11-17
  • 2021-03-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-05-28
  • 2017-04-27
  • 2021-03-11
相关资源
最近更新 更多