快捷導(dǎo)航

自定義滾動條3.0

更新時間：2009年07月18日 02:41:08 作者：

圖片自定義滾動條3.0（Duma“自動渲染版”，也許世間萬物都會變，但是真摯的愛，卻永遠(yuǎn)留存在心中?。?/div>

支持任意形式（包括圖片自定義）的美化擴(kuò)展，跨瀏覽器支持
支持鼠標(biāo)按住上、下箭按鈕實(shí)現(xiàn)上下滾動
支持鼠標(biāo)滾輪放于“滾動條區(qū)”滾動，而不僅限放于滾動內(nèi)容區(qū)才滾
支持鼠標(biāo)按住滾動條（未松開）并移出滾動區(qū)域仍然能拖拽滾動
滾動條子根據(jù)左邊滾動內(nèi)容高與可視區(qū)域高度比例等比例，且當(dāng)滾動條細(xì)到一定程度時設(shè)置最小高度值,內(nèi)容過少時隱藏滾動條子
支持鼠標(biāo)在滾動條子的上下空白區(qū)間點(diǎn)擊實(shí)現(xiàn)上、下定位滾動（模擬windows滾動條）
支持鍵盤上下方向鍵，滾動區(qū)滾完之后才輪到頁面body滾
支持頁面刷新后保留滾動條滾動位置（需瀏覽器支持或打開cookie）
鼠標(biāo)放于自定義滾動區(qū)滾動滾輪，滾動區(qū)滾完之后才輪到頁面body滾
在原來幾個版本基礎(chǔ)上代碼重構(gòu)，這回只需在渲染的div里追加一個名為"dumascroll" 的class即可自動渲染，而不設(shè)此class的不受影響
修復(fù)了以往版本所發(fā)現(xiàn)的bug：以往版本

將來版本可繼續(xù)擴(kuò)展的功能有：
1、增加空格鍵的“下方向”快速滾動支持（更好地模擬windows滾動條用戶體驗(yàn)）
2、增加頁面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代碼嵌套時有滾動的bug，被嵌套的div的滾動高度算法到這個版本時將大幅修改）
5、增加同時出現(xiàn)橫向滾動條的支持（當(dāng)有這方面需求時可以擴(kuò)展）

演示：

<!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=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 {} /*只需對需要渲染滾動條的div設(shè)置該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(http://www.blueidea.com/articleimg/2009/07/6875/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> </head> <body> <div id="wppm3vysvbp" class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;"> 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 我是第一個被渲染的，真不幸 </div> <div id="wppm3vysvbp" class="a dumfaf" style="width:400px; height:100px; margin:20px; border:2px inset #eee; overflow:auto;"> 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！ </div> <div id="wppm3vysvbp" class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:hidden;"> 22222 <div id="wppm3vysvbp" class="a dumascroll b" style=" width:200px; height:150px; margin:20px; border:1px solid #093; line-height:400%; background:#fff; overflow:hidden; float:left;"> 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 真倒霉啊，俺還是被嵌套渲染的，555555 </div> <div id="wppm3vysvbp" class="a" style=" width:200px; height:120px; margin:20px; border:2px inset #eee; background:#fff; overflow:auto; float:right; float:right;"> 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧 </div> 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 </div> <h1>圖片自定義滾動條3.0（Duma"自動渲染版"，也許世間萬物都會變，但是真摯的愛，卻永遠(yuǎn)留存在心中?。?/h1> <ol> <li>支持任意形式（包括圖片自定義）的美化擴(kuò)展，跨瀏覽器支持</li> <li>支持鼠標(biāo)按住上、下箭按鈕實(shí)現(xiàn)上下滾動</li> <li>支持鼠標(biāo)滾輪放于"滾動條區(qū)"滾動，而不僅限放于滾動內(nèi)容區(qū)才滾</li> <li>支持鼠標(biāo)按住滾動條（未松開）并移出滾動區(qū)域仍然能拖拽滾動</li> <li>滾動條子根據(jù)左邊滾動內(nèi)容高與可視區(qū)域高度比例等比例，且當(dāng)滾動條細(xì)到一定程度時設(shè)置最小高度值,內(nèi)容過少時隱藏滾動條子</li> <li>支持鼠標(biāo)在滾動條子的上下空白區(qū)間點(diǎn)擊實(shí)現(xiàn)上、下定位滾動（模擬windows滾動條）</li> <li>支持鍵盤上下方向鍵，滾動區(qū)滾完之后才輪到頁面body滾</li> <li>支持頁面刷新后保留滾動條滾動位置（需瀏覽器支持或打開cookie）</li> <li>鼠標(biāo)放于自定義滾動區(qū)滾動滾輪，滾動區(qū)滾完之后才輪到頁面body滾</li> <li>在原來幾個版本基礎(chǔ)上代碼重構(gòu)，這回只需在渲染的div里追加一個名為"dumascroll" 的class即可自動渲染，而不設(shè)此class的不受影響</li> <li>修復(fù)了以往版本所發(fā)現(xiàn)的bug：<a target="">以往版本</a></li> </ol> <h2>將來版本可繼續(xù)擴(kuò)展的功能有：</h2> <ul> <li>增加空格鍵的"下方向"快速滾動支持（更好地模擬windows滾動條用戶體驗(yàn)）</li> <li>增加頁面body的渲染支持</li> <li>增加textarea的渲染支持</li> <li>增加嵌套div的渲染支持（目前代碼嵌套時有滾動的bug，被嵌套的div的滾動高度算法到這個版本時將大幅修改）</li> <li>增加同時出現(xiàn)橫向滾動條的支持（當(dāng)有這方面需求時可以擴(kuò)展）</li> </ul> 期待大家?guī)兔ふ倚耣ug并提出寶貴建議，相信下一版本將做的更好，謝謝（QQ：149561420，gTalk：dumachuixuf@gmail.com）。 </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]