css设置基于webkit的浏览器的滚动条样式
CSS 滚动条选择器
-
::-webkit-scrollbar
—— 整个滚动条 -
::-webkit-scrollbar-button
—— 滚动条上的按钮(上下箭头) -
::-webkit-scrollbar-thumb
—— 滚动条上的滚动滑块 -
::-webkit-scrollbar-track
—— 滚动条轨道 -
::-webkit-scrollbar-track-piece
—— 滚动条没有滑块的轨道部分 -
::-webkit-scrollbar-corner
—— 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角 -
::-webkit-resizer
—— 出现在某些元素底角的可拖动调整大小的滑块(比如:textarea的可拖动按钮)
设置全局滚动条样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>css设置基于webkit的浏览器的滚动条样式</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
height: 300px;
width: 300px;
background-color: #e9f;
overflow: scroll;
}
.inner {
box-sizing: border-box;
padding: 30px;
font-size: 20px;
font-weight: bold;
color: #000;
height: 500px;
width: 500px;
background:
linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
}
::-webkit-scrollbar {
width: 20px;
background-color: #ff0;
/* 整个滚动条 */
}
::-webkit-scrollbar-button {
border-radius: 10px;
background-color: #0f0;
/* 滚动条上的按钮(上下箭头)*/
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #0ff;
/* 滚动条上的滚动滑块 */
}
::-webkit-scrollbar-track {
border-radius: 0;
background-color: #0f3;
/* 滚动条轨道 */
}
::-webkit-scrollbar-track-piece {
border-radius: 0;
background-color: #063;
/* 滚动条没有滑块的轨道部分 */
}
::-webkit-scrollbar-corner {
border-radius: 0;
background-color: #00f;
/* 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角 */
}
::-webkit-resizer {
border-radius: 0;
background-color: #f00;
/* 出现在某些元素底角的可拖动调整大小的滑块(比如:textarea的可拖动按钮) */
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<textarea></textarea>
</div>
</div>
</body>
</html>
设置单个元素样式
.wrap {
height: 300px;
width: 300px;
background-color: #e9f;
overflow: scroll;
}
.inner {
box-sizing: border-box;
padding: 30px;
font-size: 20px;
font-weight: bold;
color: #000;
height: 500px;
width: 500px;
background:
linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
}
.wrap::-webkit-scrollbar {
width: 20px;
background-color: #ff0;
/* 整个滚动条 */
}
.wrap::-webkit-scrollbar-button {
border-radius: 10px;
background-color: #0f0;
/* 滚动条上的按钮(上下箭头)*/
}
.wrap::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #0ff;
/* 滚动条上的滚动滑块 */
}
.wrap::-webkit-scrollbar-track {
border-radius: 0;
background-color: #0f3;
/* 滚动条轨道 */
}
.wrap::-webkit-scrollbar-track-piece {
border-radius: 0;
background-color: #063;
/* 滚动条没有滑块的轨道部分 */
}
.wrap::-webkit-scrollbar-corner {
border-radius: 0;
background-color: #00f;
/* 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角 */
}
.wrap::-webkit-resizer {
border-radius: 0;
background-color: #f00;
/* 出现在某些元素底角的可拖动调整大小的滑块(比如:textarea的可拖动按钮) */
}
参考
开发工具
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步