如何将水平滚动条置于元素顶部？

Question

我有一个带有水平滚动条的div。是否可能仅使用CSS将滚动条位置从元素底部更改为顶部？

- AlexAstanin

---

没有CSS方法可以样式化浏览器的默认滚动条。您需要添加自定义滚动条，将其放置在元素顶部 - 然后添加适当的JavaScript处理程序以实现滚动效果 - 如动画左/右位置或使用CSS过渡。第二种方法会更好，更容易（在我看来）进行操作。 - wick3d

我该如何跨浏览器轻松实现它？ - AlexAstanin

有一种方法，我只是试图以简单的方式正确地实现它。 - Fred

@FrederikMoller 如果你能让它工作，请发布一下 - 我很好奇。但是，它必须是一个跨浏览器兼容的解决方案，而不是一个工作草案...user3775292 请用你的评论编辑你的问题 - 如何制作自定义的、跨浏览器的滚动条（例如）。 - wick3d

Frederik Moller，是的，我不想改变滚动条。这对我来说也是一个大问题。 - AlexAstanin

Answer 1

好的，我已经想出了这个方案。根据您的需求进行修改，但这就是您所需要的全部内容，您只需要CSS，不需要JS。这不会改变滚动条，它只是将其翻转到顶部，而不是底部。如果您想更改滚动条，则需要一个插件（JS插件）。

.Container
{
  width: 200px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid black;
}

.Content { width: 300px; }

.Container, .Content
{
  transform:rotateX(180deg);
  -moz-transform:rotateX(180deg); /* Mozilla */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
  -ms-transform:rotateX(180deg); /* IE 9+ */
  -o-transform:rotateX(180deg); /* Opera */
}

<div class="Container">
  <div class="Content">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
  </div>
</div>

- Fred

---

这很聪明！如果您将一些动态内容放入其中，是否会没有任何缺点？ - wick3d

@user3775292 - 是的，那就是个问题。虽然还是有可能实现，但我自己不支持IE 8及以下版本，所以我甚至都不尝试。我知道很多人说如果你不支持所有东西就很糟糕...但如果有人想访问我的网站，他们需要使用IE 9或更高版本。当大家仍然支持所有旧东西时，我们何时才能得出结论呢？在我看来，我只想使用最新的技术。但这只是我的观点。不过，我很高兴地说，它将适用于IE 9及更高版本。 - Fred

这会导致垂直滚动方向反转。 - PitaJ

@PitaJ，有没有办法修复它？ - Rubycon

这不是一个适当的解决方案。嵌套的内容没有旋转，导致它们倒立显示。 - Mohal