在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.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
1、在html中定义好一个dom标签，可以是body或者div等等。2、给dom元素设置相应的宽度，可以用style中的width。
3、再给dom元素设置overflow属性，水平滚动条就是overflow-x:scroll。这样当元素中的内容超出设置的宽度时就会出现滚动条。
示例：
<div style="overflow-x:scrollwidth:200pxwhite-space:nowrap">当内容超出设定的宽度时自动出现横向滚动条</div>
相关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}
//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）