<div class="scrollbar"></div>
</div>
Css
.test{
width: 50px
height: 200px
overflow: auto
float: left
margin: 5px
border: none
}
.scrollbar{
width: 30px
height: 300px
margin: 0 auto
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px/*高宽分别对应横竖滚动条的尺寸*/
height: 1px
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)
background: #535353
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)
border-radius: 10px
background: #EDEDED
}
在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.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
相关css 代码如下：//强制显示滚动条:
html { overflow: scroll}
//强制隐藏滚动条:
html { overflow: hidden}
//隐藏IE的水平滚动条:
html { overflow-x: hidden}
//隐藏IE的垂直滚动条:
html { overflow-y: hidden}
//强制显示IE的水平滚动条:
html { overflow-x: scroll}
//强制显示IE的垂直滚动条:
html { overflow-y: scroll}
//强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal}
//注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
//强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical}
//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
