用css怎么设置div滚动条的样式，可改变大小的

html-css09

用css怎么设置div滚动条的样式，可改变大小的,第1张

在css设置可改变大小的div滚动条样式方法：

1.首先新建html文档，进入代码书写界面。

2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。

这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动

最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。

但横向滚动呢？

首先想到的方案是在最外面的div,outer加上 overflow-x:auto

虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。

然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。

之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。

最后突然想到一个position的新属性，sticky

设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。

所以最后设置了表头

css:

就成功实现了想要的效果了。

不过sticky的兼容性也是要考虑一下的。

代码表示方法：

.stagepad{scrollbar-face-color: #E100E1

scrollbar-shadow-color: maroon

scrollbar-highlight-color: white

scrollbar-3dlight-color: #E100E1

scrollbar-darkshadow-color:#E100E1

scrollbar-arrow-color:#E100E1

scrollbar-base-color: #E100E1

scrollbar-track-color: #E100E1

overflow-y:autoheight:1000px

filter: chroma(color=#E100E1)}

-------------------------------------

演示地址：http://hi.baidu.com/wsoufo/blog/item/2b2996cdc1f4011900e92848.html