css左右滚动条放顶部

如果你需要在网页中展示大量内容，但又不想将页面拉得过长，那么左右滚动条就是一个不错的解决方案。但默认情况下，滚动条会显示在页面的底部，这可能不太方便用户使用。那么，如何将滚动条放到页面的顶部呢？

其实方法很简单，只需要使用CSS就可以实现。下面是一个示例代码：

body {
  overflow-x: scroll;
  overflow-y: hidden;
}

/*将滚动条放到页面顶部*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 5px;
}

首先，我们需要将页面的横向滚动条显示出来，因此给body元素设置了overflow-x属性为scroll。同时，为了防止页面纵向出现滚动条，将overflow-y设置为hidden。

接着，我们将使用CSS伪元素来定制滚动条。使用::-webkit-scrollbar伪元素来为滚动条创建样式，其中width和height属性分别用于设置滚动条的宽度和高度。在这个示例中，我们将滚动条的宽度和高度都设置为了10px。

接下来，我们为滚动条的轨道设置了不同的颜色。使用::-webkit-scrollbar-track-piece伪元素来定义轨道样式，设置background-color属性使其有一个淡灰色背景。

最后，在滚动条的拇指上添加上一个黑色背景并为其设置5像素的圆角，使用::-webkit-scrollbar-thumb伪元素来定制滚动拇指样式。

通过这些CSS样式的设置，我们就可以将左右滚动条放到页面顶部。这样，用户就可以更方便地使用滚动条，查看网页中大量的内容。