js 自制滾動(dòng)條的小例子
寫(xiě)了個(gè)js自制滾動(dòng)條,首先,先看一下demo(點(diǎn)擊這里) 先
有兩個(gè)demo,右邊那個(gè)黑色那個(gè),是我一開(kāi)始寫(xiě)的比較膚淺的代碼:
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)作開(kāi)始初鼠標(biāo)的位置
bTop=0, //滾動(dòng)動(dòng)作開(kāi)始初滾動(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)作開(kāi)始初鼠標(biāo)的位置
bTop=0; //滾動(dòng)動(dòng)作開(kāi)始初滾動(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)文章
JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法,實(shí)例分析了基于Mootools框架實(shí)現(xiàn)動(dòng)態(tài)載入的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果
這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果,效果非常棒,需要的朋友可以參考下2016-07-07javascript控制frame,iframe的src屬性代碼
原理就是通過(guò)獲取當(dāng)前網(wǎng)頁(yè)地址欄的信息傳參,然后設(shè)置框架的地址。2009-12-12函數(shù)四種調(diào)用模式以及其中的this指向
本文主要介紹了函數(shù)四種調(diào)用模式以及其中的this指向的相關(guān)知識(shí),具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01使弱類(lèi)型的語(yǔ)言JavaScript變強(qiáng)勢(shì)
Javascript (ECMA Script)是一種弱類(lèi)型的語(yǔ)言.這并不意味著它沒(méi)有數(shù)據(jù)類(lèi)型,只是變量或者Javascript對(duì)象屬性不需要一個(gè)特定類(lèi)型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類(lèi)型轉(zhuǎn)換成為適用(或者要求)的內(nèi)容以便于使用.2009-06-06Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06Express代理轉(zhuǎn)發(fā)服務(wù)器實(shí)現(xiàn)
這篇文章主要為大家介紹了Express代理轉(zhuǎn)發(fā)服務(wù)器實(shí)現(xiàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05