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

在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、<divstyle="height:300pxwidth:100pxoverflow:auto"><div/>（height和width根据需求设定）

注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。

2、你也可以将overflow设置为scroll，即:<divstyle="height:300pxwidth:100pxoverflow:scroll"><div/>。这样设定的效果为

不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。

3、也可以这样设置

水平滚动条：<divstyle="width:100pxoverflow-x:auto"></div>

垂直滚动条：<divstyle="height:300pxoverflow-y:auto"></div>

水平加垂直：<divstyle="width:100pxheight:300pxoverflow-x:autooverflow-y:auto"></div>

扩展资料

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用id或class来标记<div>，那么该标签的作用会变得更加有效。

注释：<div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。

提示：请使用<div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。

参考资料：百度百科div

欢迎分享，转载请注明来源：内存溢出

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