目的：用js模擬實現滾動條，從而達到設計圖以及產品要求的效果……
原理：伴隨著父級容器overflow，控制絕對容器的left,top值，從而達到效果。
html**
1<
div
id="show"
>23
<
div
id="container"
>
4<
p>1326546478797897987
p>
5<
p>1326546478797897987
p>
6<
p>1326546478797897987
p>
7<
p>1326546478797897987
p>
8<
p>1326546478797897987
p>
9<
p>1326546478797897987
p>
10<
p>1326546478797897987
p>
11<
p>1326546478797897987
p>
12<
p>1326546478797897987
p>
13<
p>1326546478797897987
p>
14<
p>1326546478797897987
p>
15<
p>1326546478797897987
p>
16<
p>1326546478797897987
p>
17<
p>1326546478797897987
p>
18<
p>1326546478797897987
p>
19<
p>1326546478797897987
p>
20div
>
2122
23<
div
id="sctollcon"
>
24<
div
id="sctolldo"
>
div>
25div
>
26div
>
js**：
scorlltop();//豎向的滾動條，四個引數,jquery物件，
//function
scorlltop($obj)
else
); $sroll.css();
}});
$container.mouseout(
function
());
function
mousedown(e)
function
mousemove(e));
$contanr.css();
return
false
; }
function
mouseup()
function
mousescr(ev)
else
if(bbtn)
else
var maxtop = $contanr.outerheight()-$container.outerheight();
topy = topy > 0 ? 0: topy;
topy = topy < -maxtop ? -maxtop : topy;
$contanr.css();
$sroll.css();
if(ev.preventdefault)
else
}}//
scorlltop end!
//拖拽活動層,拖拽的區域,活動的區域，最大活動區域，預設是window
function
dragconfun(obj));
addevent(document,'mousemove',mousemove);
addevent(document,'mouseup',mouseup);
return
false
; };
function
mousemove(e));
return
false
; };
function
mouseup());
removeevent(document,'mousemove',mousemove);
removeevent(document,'mouseup',mouseup);
return
false
; };
if(obj.clickother)
});};
}//dragconfun end!
//新增監聽事件
function
addevent( obj, type, fn )
obj.attachevent( 'on'+type, obj[type+fn] );
} else
} //
移除監聽事件
function
removeevent( obj, type, fn )
else
}
自定義滾動條
滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...
自定義滾動條
body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...
自定義滾動條
不主攻前端，最近因為工作原因做了幾個小樣例，已被以後用 樣例中用到的銀行就不上傳了 輸入框1 輸入框2 下拉選項 選項1選項2 選項3選項4 選項5選項6 選項7選項8 選項9 確認 按鈕樣式 global custom btn global custom btn hover 表單樣式 global...