css自定义滚动条样式-不支持FF

Firefox下的CSS滚动条定制

最新推荐文章于 2024-09-10 05:29:40 发布

转载最新推荐文章于 2024-09-10 05:29:40 发布 · 546 阅读

css文档专栏收录该内容

6 篇文章

订阅专栏

本文分享了一段HTML代码及CSS样式，旨在实现自定义滚动条样式，特别针对Firefox浏览器进行了调整，以确保兼容性和美观性。

转载于：http://www.jiaoben8.cn/Article-id198.html

不等不说，每个浏览器都有自己的脾气，好不容易讨好其他浏览器，但偏偏在你这里雷打不动，我恨你火狐ψ(╰_╯)

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css自定义滚动条样式-不支持FF</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<div style="height:1200px;"></div>
</body>
</html>

css样式：

::-webkit-scrollbar-track-piece{background-color:#ccc}//内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar{width:15px;height:15px;}//滚动条整体部分
::-webkit-scrollbar-thumb{background-color:#999;background-clip:padding-box;min-height:30px}//（拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
::-webkit-scrollbar-thumb:hover{background-color:#aaa}//不用解释了吧
HTML{
SCROLLBAR-FACE-COLOR:#999; //滚动条凸出部分的颜色
SCROLLBAR-SHADOW-COLOR:#999;//立体滚动条阴影的颜色
SCROLLBAR-HIGHLIGHT-COLOR:#999; //滚动条空白部分的颜色
SCROLLBAR-3DLIGHT-COLOR:#999;//滚动条亮边的颜色
SCROLLBAR-DARKSHADOW-COLOR:#999;//滚动条强阴影的颜色
SCROLLBAR-TRACK-COLOR:#ccc;//滚动条的背景颜色
SCROLLBAR-ARROW-COLOR:#eee;//上下按钮上三角箭头的颜色
}