跨浏览器兼容自定义浏览器滚动条

在做到一个页面的时候,需要设置一个自定义的滚动条,但是设置scrollbar的方法似乎只对IE有效,而对FF/CHROME等等无效,在网上找寻大牛的解决办法,先行MARK一下,但是对于IFRAME貌似是无解的。有兴趣的可以移步至原文查看,来自blueidea论坛。还有另一种办法是通过jQuery实现的,在下面也会介绍到并有DEMO。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol,ul { margin:20px; line-height:160%; }
ul li { color:#f00; }
.a1 { width:300px; height:190px; border:1px solid #f00; overflow:auto; }
.a2 { width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(https://www.zbw123.com/webmaster/ximenScrollBar/images/duma.gif) no-repeat 50%; overflow:auto; }
.dumascroll {}		/*只需对需要渲染滚动条的div设置该class即可*/
.dumascroll_area {
	height:100%;
	overflow:hidden;
}
.dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
	background-image:url(https://www.zbw123.com/webmaster/ximenScrollBar/images/un_bg_bar.gif);
}
.dumascroll_bar {
	position:absolute;
	top:0;
	right:0;
	z-index:9;
	width:14px;
	height:100%;
	cursor:default;
	-moz-user-select:none;
	-khtml-user-select:none;
	user-select:none;
	background-repeat:repeat-y;
	background-position:-42px 0;
	float:left;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
	position:absolute;
	left:0;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
	width:100%;
	height:14px;
	color:#fff;
	text-align:center;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0; }
.dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y; }
.dumascroll_arrow_up { background-position:0 0; }
.dumascroll_arrow_up_a { background-position:-14px 0; }
.dumascroll_handle { background-position:-28px 0; }
.dumascroll_handle_a { background-position:-56px 0; }
.dumascroll_arrow_down { background-position:-70px 0; }
.dumascroll_arrow_down_a { background-position:-84px 0; }
</style>

我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸
我是第一个被渲染的,真不幸

 

我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样?哈哈哈!

 

22222

真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555
真倒霉啊,俺还是被嵌套渲染的,555555

 

笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧
笨哟你,嵌套就嵌套,你不用他class就不会被渲染,你看看我,羡慕吧

11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111
fsdfs
11111111

 

图片自定义滚动条3.0(Duma“自动渲染版”,也许世间万物都会变,但是真挚的爱,却永远留存在心中!)

 

    1. 支持任意形式(包括图片自定义)的美化扩展,跨浏览器支持

 

    1. 支持鼠标按住上、下箭按钮实现上下滚动

 

    1. 支持鼠标滚轮放于“滚动条区”滚动,而不仅限放于滚动内容区才滚

 

    1. 支持鼠标按住滚动条(未松开)并移出滚动区域仍然能拖拽滚动

 

    1. 滚动条子根据左边滚动内容高与可视区域高度比例等比例,且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子

 

    1. 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动(模拟windows滚动条)

 

    1. 支持键盘上下方向键,滚动区滚完之后才轮到页面body滚

 

    1. 支持页面刷新后保留滚动条滚动位置(需浏览器支持或打开cookie)

 

    1. 鼠标放于自定义滚动区滚动滚轮,滚动区滚完之后才轮到页面body滚

 

    1. 在原来几个版本基础上代码重构,这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染,而不设此class的不受影响

 

    1. 修复了以往版本所发现的bug:以往版本

 

 

将来版本可继续扩展的功能有:

 

    • 增加空格键的“下方向”快速滚动支持(更好地模拟windows滚动条用户体验)

 

    • 增加页面body的渲染支持

 

    • 增加textarea的渲染支持

 

    • 增加嵌套div的渲染支持(目前代码嵌套时有滚动的bug,被嵌套的div的滚动高度算法到这个版本时将大幅修改)

 

    • 增加同时出现横向滚动条的支持(当有这方面需求时可以扩展)

 

 

期待大家帮忙寻找新bug并提出宝贵建议,相信下一版本将做的更好,谢谢(QQ:149561420,gTalk:[email protected])。

 

还有另一种方法,是通过jQuery实现的。原文链接
UPDATED ON 2012.02.03
今天逛GOOGLE无意发现另一种,透过WebKit实现,但是显然只支持WebKit内核的浏览器(如chrome),不能支持IE,如果一定要兼容IE,可以在HEAD部分先行进行判断客户端浏览器类型,然后做出选择。有兴趣的可以查看原文
查看方法一DEMO
查看方法二DEMO
查看方法三DEMO-1
查看方法三DEMO-2打包下载该DEMO文件
查看方法三DEMO-3打包下载该DEMO文件

最后,还在国外某个大牛那里找到一个封装好的跨浏览器兼容的自定义滚动条代码——fleXcrolla,兼容Safari for iPhone OS, Opera 8.5+, Firefox 1.5+ for PC and MAC and Linux, Webkit (MAC), IE5+ 等各类主流浏览器,如果有人确定一定要实现这个效果,并且保证在前端访问客户的每一款浏览器上都能正确显示,这将是一个十分不错的选择,但是退一步说,这种效果其实往往并不是必须的,现在也用得越来越少,如果为了这个而去增加页面加载的代码并且使页面结构复杂化或者还要加载多余的js文件,那么就似乎有点得不偿失了,当然,如果你的主机速度很好除外。

fleXcrolla 在线demo 封装代码下载