快捷導(dǎo)航

自定義滾動(dòng)條3.0

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

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

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

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

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