div滚动条样式设置

 时间:2026-02-16 18:02:45

1、新建一个HTML文档,这里设立一下基本的架构。

div滚动条样式设置

2、再新建一个CSS文件,用link关联一下HTML文档。

div滚动条样式设置

3、创建DIV标签,并且往里面填充内容。

div滚动条样式设置

div滚动条样式设置

4、先设定一下滚动条内框的大小,用border先来查看是否有超出,这里可以看出超出了很多内容。

div滚动条样式设置

div滚动条样式设置

5、overflow-y: scroll;

overflow-x: scroll;

加上这个样式滚动条就会出现了。

div滚动条样式设置

div滚动条样式设置

6、#ds::-webkit-scrollbar-track {

    background-color: green;

}


#ds::-webkit-scrollbar {

    width: 20px;

}


#ds::-webkit-scrollbar-thumb {

    background-color: pink;

    border-radius: 50%;

}

现在我们就能对轨道和滚动条进行样式的设置了。

div滚动条样式设置

div滚动条样式设置

  • HTML、CSS3怎么制作渐变边框
  • eclipse怎么恢复默认布局
  • Eclipse如何更换工作区【图文】
  • Eclipse如何修改java(JDK)默认版本
  • js如何向html标签写入内容
  • 热门搜索
    安全意识手抄报 手抄报边框素材 文明的手抄报 手抄报装饰简单又漂亮 手抄报模板图片 感恩父母手抄报资料 手抄报怎么画 读书小报手抄报图片 护林防火手抄报 防地震手抄报内容