用css怎么设置div滚动条的样式,可改变大小的
2022-12-02 · 百度认证:北京惠企网络技术有限公司官方账号
在css设置可改变大小的div滚动条样式方法:
1.首先新建html文档,进入代码书写界面。
2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/}
这里主要芹告是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码嫌蠢明工作做完后,就可以查看效果,效果如下红框所示,滚档渗动条设置完成。
在css样式中设置浏览器滚动条样式操作步骤如下:
1.打开软件,新建html文档,如下图红框所示为新建界面。
2.在</head>和<body>中间书写hmtl代码,<div>这里面输入你想要输入的内容即可</div>,如下图红框所示。
3.然后在<body>和</body>中间书指老写外层轨道css代码:body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/} 。
这里主要是设置外层轨道的形状和颜色,根据想要设置的样式进行调节即可,如下图红框所示。
4.然后在外层轨道下面书写内层轨道css代码:body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}。
这里主要是设置内层轨道的形状和颜色,根据想要设置的样式进行调节即可,如下图红框所示。
5.以上代码代码输入完成,就可以运行看效果,效果如下红框所示,滚动条凳谈设置完成,唯粗升如果不喜欢样式,回去修改代码属性即可。
在css设置可改变大小的div滚动条样式方法:
1.首先新建html文档,进入代链桥码书写界面。
2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}
这里主要是设置内层轨道的形状和返并颜色。
5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。棚世猛
::-webkit-scrollbar{width:14px;}
::-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}
这段代码放倒CSS文件里去,宽度颜纤明色自己修改,且只在webkit内核浏览器下才埋陆生效,就是谷歌浏览器的内核。毁液告