html中如何设置滚动条的位置向左偏

html中如何设置滚动条的位置向左偏

有点编程常识的人都知道，htm的滚动条（浏览器滚动条）竖向靠右，横向从左向右。但是横向的几乎都是隐藏的，用不到，竖向滚动都是需要的。

那，如何设置滚动条自由位置呢，请看详细经验。

1、新建div标签

新建一个html文件，命名为（滚动条向左偏移.html），使用记事本打开html文件，新建一个div。

如图：

2、设置div样式

在文件中写入div的样式，高度一定要比浏览器窗口高，才会显示出滚动条来。

写入以下样式：

如图：

3、显示div竖向滚动条

在样式表中写入以下代码：

overflow-y:scroll; //显示竖向滚动条，并填充div内容。

如图：

4、设置滚动条颜色属性

在样式中写入以下代码：

scrollbar-3d-light-color:#FFFF00;

scrollbar-arrow-color:#FF0000;

scrollbar-base-color:#f2c3d4;

scrollbar-dark-shadow-color:blue;

scrollbar-face-color:yellow;

scrollbar-highlight-color:#4c28df;

scrollbar-shadow-color:blue;

如图：

5、调整宽度

写入以下CSS样式：

::-webkit-scrollbar{width:15px;}

::-webkit-scrollbar-track{background-color:#bee1eb;}

::-webkit-scrollbar-thumb{background-color:#00aff0;}

::-webkit-scrollbar-thumb:hover {background-color:#9c3}

::-webkit-scrollbar-thumb:active {background-color:#00aff0}

如图：

6、调整位置

写入以下代码：

如图：