自定义滚动条3.0_javascript技巧

1. 支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持
2. 支持鼠标按住上、下箭按钮实现上下滚动
3. 支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚
4. 支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动
5. 滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子
6. 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）
7. 支持键盘上下方向键，滚动区滚完之后才轮到页面body滚
8. 支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）
9. 鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚
10. 在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响
11. 修复了以往版本所发现的bug：以往版本

将来版本可继续扩展的功能有：
1、增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）
2、增加页面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）
5、增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）

演示：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <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(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:auto; } .dumascroll {} /*</style>