火狐浏览器滚动条样式修改 css
程序员文章站
2022-07-03 20:51:12
...
纯css设置Firefox火狐浏览器的滚动条样式
设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个。看名字就知道第一个是设置滚动条颜色的，第二个是设置滚动条(竖直方向)宽度，(水平方向)高度的。
在Firefox中设置滚动条的样式
```typescript
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>在Firefox中设置滚动条的样式</title>
<style>
.wrap{
height: 300px;
width: 300px;
background-color: #e9f;
overflow: scroll;
scrollbar-color: red #0ff;
scrollbar-width: 88px;
}
.inner{
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%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>