内嵌式css写滚动条，css设置div滚动条样式

编程之家2026-06-24744次浏览

大家好，今天给各位分享内嵌式css写滚动条的一些知识，其中也会对css设置div滚动条样式进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

可以使用css的overflow标签实现ul加滚动条。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的ul加滚动条效果。

在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.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。

1、首先打开前端开发工具，新建一个HTML代码页面，如下图所示。

2、在html代码页面上创建一个父<div>和一个子<div>，同时给这两个div添加一个class分别为scroll-box、scroll。

3、给子<div>添加内容，为了让滚动条可以实现，尽量多添加一些内容。

4、设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式，给scroll设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽

5、最后保存html代码，然后使用浏览器打开，这个时候会发现滚动条已经不显示出来，但是页面内容依然可以滚动。

好了，文章到此结束，希望可以帮助到大家。