js 自制滾動(dòng)條的小例子
寫了個(gè)js自制滾動(dòng)條，首先，先看一下demo（點(diǎn)擊這里） 先
有兩個(gè)demo，右邊那個(gè)黑色那個(gè)，是我一開始寫的比較膚淺的代碼：
var scrollself=(function(){
var scrollblock, //滾動(dòng)塊
scrollcontent, //被滾動(dòng)的內(nèi)容
scrollbar, //滾動(dòng)條
scrollpanel, //滾動(dòng)內(nèi)容的滾動(dòng)區(qū)域
cdistance, //滾動(dòng)內(nèi)容要滾動(dòng)的距離
bdistance, //滾動(dòng)塊要滾動(dòng)的距離
minuTop, //滾動(dòng)條頭尾剩下的空白
cTop, //滾動(dòng)內(nèi)容的top
startY=0, //滾動(dòng)動(dòng)作開始初鼠標(biāo)的位置
bTop=0, //滾動(dòng)動(dòng)作開始初滾動(dòng)塊的top
isDrag=false; //是否拉動(dòng)滾動(dòng)塊
function prevent(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
e.cancelBubble=true;
e.returnValue=false;
}
function mouseDown(event){
isDrag=true;
event=event||window.event;
startY=event.clientY;
bTop=scrollblock.offsetTop;
cTop=scrollcontent.offsetTop;
// prevent(event);
}
function mouseMove(event){
if(isDrag){
event=event||window.event;
var newbTop=event.clientY-startY+bTop,
newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;
if(newbTop<minuTop){
newbTop=minuTop;
newcTop=0;
}else{
if(newbTop>bdistance+minuTop){
newcTop=-cdistance;
newbTop=bdistance+minuTop;
}
}
scrollblock.style.top=newbTop+'px';
scrollcontent.style.top=newcTop+'px';
}else{
isDrag=false;
}
// prevent(event);
}
function mouseUp(event){
isDrag=false;
// prevent(event);
}
function addHandler(){
scrollblock.onmousedown=mouseDown;
scrollblock.onmousemove=mouseMove;
scrollblock.onmouseup=mouseUp;
document.onmouseup=mouseUp;
}
return{
init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
scrollblock=document.getElementById(scrollblock_id);
scrollcontent=document.getElementById(scrollcontent_id);
scrollbar=document.getElementById(scrollbar_id);
scrollpanel=document.getElementById(scrollpanel_id);
minuTop=scrollblock.offsetTop;
cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
addHandler();
}
}
}());
scrollself.init('scrollpanel2','scrollcontent2','scrollbar2','scrollblock2');
之所以說(shuō)它膚淺，比較一下兩個(gè)demo的滾動(dòng)效果就知道了，右邊的拉動(dòng)滾動(dòng)塊時(shí)候，體驗(yàn)效果好差，很卡，而左邊的就流暢多了。
因?yàn)楹芸?，我就又上網(wǎng)看了一下別人的代碼，然后把根據(jù)別人的思路把代碼改了一下，就有了左邊那個(gè)綠色的那個(gè)demo，很明顯，效果好了很多，代碼：
var scroll=(function(){
var scrollblock, //滾動(dòng)塊
scrollcontent, //被滾動(dòng)的內(nèi)容
scrollbar, //滾動(dòng)條
scrollpanel, //滾動(dòng)內(nèi)容的滾動(dòng)區(qū)域
cdistance, //滾動(dòng)內(nèi)容要滾動(dòng)的距離
bdistance, //滾動(dòng)塊要滾動(dòng)的距離
minuTop, //滾動(dòng)條頭尾剩下的空白
cTop, //滾動(dòng)內(nèi)容的top
startY=0, //滾動(dòng)動(dòng)作開始初鼠標(biāo)的位置
bTop=0; //滾動(dòng)動(dòng)作開始初滾動(dòng)塊的top
function mouseDown(event){
event=event||window.event;
startY=event.clientY;
bTop=scrollblock.offsetTop;
cTop=scrollcontent.offsetTop;
if(scrollblock.setCapture){
scrollblock.onmousemove=doDrag;
scrollblock.onmouseup=stopDrag;
scrollblock.setCapture();
}else{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
}
function doDrag(event){
event=event||window.event;
var newbTop=event.clientY-startY+bTop,
newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;
if(newbTop<minuTop){
newbTop=minuTop;
newcTop=0;
}else if(newbTop>bdistance+minuTop){
newcTop=-cdistance;
newbTop=bdistance+minuTop;
}
scrollblock.style.top=newbTop+'px';
scrollcontent.style.top=newcTop+'px';
}
function stopDrag(event){
if(scrollblock.releaseCapture){
scrollblock.onmousemove=doDrag;
scrollblock.onmouseup=stopDrag;
scrollblock.releaseCapture();
}else{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
scrollblock.onmousemove=null;
scrollblock.onmouseup=null;
}
return{
init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
scrollblock=document.getElementById(scrollblock_id);
scrollcontent=document.getElementById(scrollcontent_id);
scrollbar=document.getElementById(scrollbar_id);
scrollpanel=document.getElementById(scrollpanel_id);
minuTop=scrollblock.offsetTop;
cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
scrollblock.onmousedown=mouseDown;
enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
}
}
}());
scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');
比較了一下兩個(gè)的代碼，其實(shí)修改的不多，就有一點(diǎn)很大的不同，流暢的那一個(gè)（左邊綠色那一個(gè)）多了這個(gè)東西——setCapture、releaseCapture。
具體是怎樣的，再研究一下先。
- 判斷滾動(dòng)條到底部的JS代碼
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- js動(dòng)態(tài)移動(dòng)滾動(dòng)條至底部示例代碼
- js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
- JS 獲取滾動(dòng)條高度示例代碼
- js控制滾動(dòng)條緩慢滾動(dòng)到頂部實(shí)現(xiàn)代碼
- js模擬滾動(dòng)條(橫向豎向)
- javascript jscroll模擬html元素滾動(dòng)條
- js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
相關(guān)文章
收集的網(wǎng)上用的ajax之chat.js文件...2007-04-04
這篇文章主要簡(jiǎn)單介紹了頁(yè)面裝載js及性能分析方法的相關(guān)資料,需要的朋友可以參考下2014-12-12
js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript傳遞變量 值傳遞 引用傳遞,需要的朋友可以參考下。2011-02-02
使用typescript推導(dǎo)已有變量的盲盒類型詳情
這篇文章主要介紹了使用typescript推導(dǎo)已有變量的盲盒類型詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 工廠模式,結(jié)合實(shí)例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法
JS獲取當(dāng)前頁(yè)面名稱的簡(jiǎn)單實(shí)例