一般默認的滾動條會比較丑，有的需求會讓我們制作簡單漂亮的滾動條颈娜，用來代替系統(tǒng)默認的滾動條锚赤，下面介紹使用簡單的js實現(xiàn)自定義滾動條的功能；
先來看一下效果圖：
效果圖
做這個效果的關(guān)鍵思路就是計算滾動組件和滾動區(qū)域的滾動比例
分成兩種情況揩徊，一種是鼠標點擊小人物拖動，另一個是鼠標滾輪滑動拖動
具體實現(xiàn)代碼如下
HTML結(jié)構(gòu)部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
body{
height:2000px;
}
.box1{
width: 320px;
height: 400px;
background: #ccc;
overflow: hidden;
overflow-y: scroll;
margin: 20px 0 0 100px;
}
.con1{
font-size: 18px;
}
#out{
width: 320px;
height: 400px;
background: url(bg1.png) 0 0 repeat-x;
position: absolute;
left: 500px;
top: 20px;
overflow: hidden;
}
#con{
width: 280px;
padding: 5px;
font-size: 18px;
position: absolute;
left: 0px;
top: 0px;
}
#box{
width: 30px;
height: 400px;
position: absolute;
right: 0;
top: 0;
}
#drag{
width: 30px;
height: 53px;
background: url(icon2.png) 0 0 no-repeat;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box1">
<p class="con1">據(jù)新華社電中航工業(yè)、國機集團等8家央企6日在京簽約塑荒，在重要項目熄赡、科技轉(zhuǎn)化等相關(guān)領(lǐng)域開展重組合作整合，這將成為央企間產(chǎn)業(yè)聯(lián)合協(xié)作的新典范齿税，也將開啟央企間產(chǎn)業(yè)重組合作整合的新階段彼硫。
相關(guān)合作內(nèi)容包括：中航工業(yè)和國機集團共同發(fā)展八萬噸模鍛壓機項目；中航工業(yè)將房地產(chǎn)業(yè)務全部劃轉(zhuǎn)保利集團凌箕，中核建設(shè)和中國一重在高溫氣冷堆主設(shè)備制造領(lǐng)域合作乌助，兵器工業(yè)、兵器裝備陌知、中國國新對北方公司進行股權(quán)重組。
國務院國資委主任肖亞慶在6日參加中央企業(yè)產(chǎn)業(yè)合作座談會上表示掖肋，下一步仆葡，國資委政策將加碼推動央企產(chǎn)業(yè)重組步伐，通過業(yè)務整合志笼、資產(chǎn)重組沿盅、股權(quán)合作、資產(chǎn)置換纫溃、無償劃轉(zhuǎn)腰涧、協(xié)議轉(zhuǎn)讓、戰(zhàn)略聯(lián)盟紊浩、聯(lián)合開發(fā)等多途徑窖铡，加快央企間產(chǎn)業(yè)重組合作整合。
肖亞慶同時清晰地勾勒出國企改革兼并重組“路線圖”：通過產(chǎn)業(yè)重組坊谁，在突破關(guān)鍵技術(shù)费彼、掌握核心資源，打造知名品牌等方面口芍，實現(xiàn)產(chǎn)業(yè)重組合作“一加一大于二”的效果箍铲。肖亞慶同時透露，目前部分央企在牽頭技術(shù)創(chuàng)新戰(zhàn)略聯(lián)盟鬓椭、設(shè)立創(chuàng)新投資基金颠猴、構(gòu)建創(chuàng)新孵化平臺等方面，取得了重大突破小染。據(jù)統(tǒng)計翘瓮，央企牽頭國家及地方技術(shù)創(chuàng)新聯(lián)盟141個，50多家中央企業(yè)共發(fā)起和參與基金179只氧映，構(gòu)建面向社會的創(chuàng)新孵化平臺57個春畔，創(chuàng)業(yè)創(chuàng)新平臺27個。
“此次集中簽約，意味著央企重組的重心開始向資本律姨、項目振峻、產(chǎn)業(yè)板塊等內(nèi)部要素轉(zhuǎn)移≡穹荩”中國企業(yè)研究院首席研究員李錦說扣孟，未來，央企間產(chǎn)業(yè)重組合作整合將被更快地推進荣赶，央企內(nèi)部的各種要素將被再次優(yōu)化凤价。</p>
</div>
<div id="out">
<div id="con">據(jù)新華社電中航工業(yè)、國機集團等8家央企6日在京簽約拔创，在重要項目利诺、科技轉(zhuǎn)化等相關(guān)領(lǐng)域開展重組合作整合，這將成為央企間產(chǎn)業(yè)聯(lián)合協(xié)作的新典范剩燥，也將開啟央企間產(chǎn)業(yè)重組合作整合的新階段慢逾。
相關(guān)合作內(nèi)容包括：中航工業(yè)和國機集團共同發(fā)展八萬噸模鍛壓機項目；中航工業(yè)將房地產(chǎn)業(yè)務全部劃轉(zhuǎn)保利集團灭红，中核建設(shè)和中國一重在高溫氣冷堆主設(shè)備制造領(lǐng)域合作侣滩，兵器工業(yè)、兵器裝備变擒、中國國新對北方公司進行股權(quán)重組君珠。
國務院國資委主任肖亞慶在6日參加中央企業(yè)產(chǎn)業(yè)合作座談會上表示，下一步娇斑，國資委政策將加碼推動央企產(chǎn)業(yè)重組步伐策添，通過業(yè)務整合、資產(chǎn)重組悠菜、股權(quán)合作舰攒、資產(chǎn)置換、無償劃轉(zhuǎn)悔醋、協(xié)議轉(zhuǎn)讓摩窃、戰(zhàn)略聯(lián)盟、聯(lián)合開發(fā)等多途徑芬骄，加快央企間產(chǎn)業(yè)重組合作整合猾愿。
肖亞慶同時清晰地勾勒出國企改革兼并重組“路線圖”：通過產(chǎn)業(yè)重組，在突破關(guān)鍵技術(shù)账阻、掌握核心資源蒂秘，打造知名品牌等方面，實現(xiàn)產(chǎn)業(yè)重組合作“一加一大于二”的效果淘太。肖亞慶同時透露姻僧，目前部分央企在牽頭技術(shù)創(chuàng)新戰(zhàn)略聯(lián)盟规丽、設(shè)立創(chuàng)新投資基金、構(gòu)建創(chuàng)新孵化平臺等方面撇贺，取得了重大突破赌莺。據(jù)統(tǒng)計，央企牽頭國家及地方技術(shù)創(chuàng)新聯(lián)盟141個松嘶，50多家中央企業(yè)共發(fā)起和參與基金179只艘狭，構(gòu)建面向社會的創(chuàng)新孵化平臺57個，創(chuàng)業(yè)創(chuàng)新平臺27個翠订。
“此次集中簽約巢音，意味著央企重組的重心開始向資本、項目尽超、產(chǎn)業(yè)板塊等內(nèi)部要素轉(zhuǎn)移官撼。”中國企業(yè)研究院首席研究員李錦說似谁，未來歧寺，央企間產(chǎn)業(yè)重組合作整合將被更快地推進，央企內(nèi)部的各種要素將被再次優(yōu)化棘脐。</div>
<div id="box">
<p id="drag"></p>
</div>
</div>
</body>
javascript部分：
var out=document.getElementById('out');
var con=document.getElementById('con');
var box=document.getElementById('box');
var drag=document.getElementById('drag');
//鼠標點擊拖動部分
drag.onmousedown=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
//鼠標點擊位置距離拖動組件頂部的距離
var d_bkt=e.clientY-drag.offsetTop;
//鼠標拖動函數(shù)
document.onmousemove=function (ev){
var e=ev||window.event;
var top=e.clientY-d_bkt;
if (top<=0) {
top=0;
};
if (top>=box.clientHeight-drag.clientHeight) {
top=box.clientHeight-drag.clientHeight;
};
//計算滾動比例
var scale=top/(box.clientHeight-drag.clientHeight);
//滾動區(qū)域的滾動距離
var cony=scale*(con.clientHeight-out.clientHeight);
drag.style.top=top+'px';
con.style.top=-cony+'px';
console.log(top);
}
document.onmouseup=function (){
document.onmousemove=null;
}
}
//以下為鼠標滾輪事件
var str=window.navigator.userAgent.toLowerCase();
if (str.indexOf('firefox')!=-1) {//火狐瀏覽器
out.addEventListener('DOMMouseScroll',function (e){
e.preventDefault();//阻止窗口默認的滾動事件
if (e.detail<0) {//下滾
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
//計算滾動條和滾動區(qū)域的滾動比例
var scale=t/(con.clientHeight-out.clientHeight);
//滾動區(qū)域的滾動距離
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.detail>0) {//上滾
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
},false);
} else{//非火狐瀏覽器
out.onmousewheel=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
if (e.wheelDelta>0) {//下滾
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.wheelDelta<0) {//上滾
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
//設(shè)置滾動比例
var scale=t/(con.clientHeight-out.clientHeight);
//設(shè)置滾動區(qū)域的滾動距離
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
}
};
