css滚动条样式自定义
2024-08-27 08:41:58
很简单的几行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 600px;
margin: 100px auto;
overflow-y: auto;
}
/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
.out::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动条里面小方块 */
.out::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/* 滚动条里面轨道 */
.out::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="out">
<p style="height:250px;background: #ccc;">段落一</p>
<p style="height:250px;background: #eee;">段落二</p>
<p style="height:250px;background: #ccc;">段落三</p>
</div>
</body>
</html>
最终效果图:
最新文章
- MMORPG大型游戏设计与开发(服务器 AI 事件)
- CSV的导入导出
- CSS书写规范及顺序
- Json与类对象转换
- mvc3在window 7 iis7下以及 xp iis 5.1下的部署 ,asp.net MVC3无法打开项目文件E:/我们的项目/Project/HeatingMIS.Web/HeatingMIS.Web.csproj”。此安装不支持该项目类型。
- mysql 检查字符串是否包含子串
- VMware-workstation-full-10.0.1-1379776 CN
- setsockopt中参数之SO_REUSEADDR的意义(转)
- app上传 需要的icon
- Ubuntu 14.04 没有system settings的解决方法
- python运算符使用规律
- git仓库迁移和更新远程仓库地址
- oc随笔五:NSArray
- Hibernate注解配置与XML配置区别
- 验证Oracle处理速度
- 深度学习之卷积神经网络(CNN)
- 计算器模拟器中的情怀——Free42简介
- HTML和CSS怎么用
- SQL Server聚合函数与聚合开窗函数 (转载)
- wpgcms---首页数据怎么掉