這篇文章主要介紹了JS模擬簡(jiǎn)易滾動(dòng)條效果代碼,可模擬出滾動(dòng)條拖動(dòng)顯示的效果,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素運(yùn)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實(shí)例講述了JS模擬簡(jiǎn)易滾動(dòng)條效果的方法。分享給大家供大家參考，具體如下：
使用Js模擬滾動(dòng)條。簡(jiǎn)易模式，類似手機(jī)上常見(jiàn)的滾動(dòng)條。
效果如下：
Js代碼如下：
var scrollMoveObj = null, scrollPageY = 0, scrollY = 0;
var scrollDivList = new Array();
// obj需要添加滾動(dòng)條的對(duì)象 w滾動(dòng)條寬度 className滾動(dòng)條樣式名稱
// obj元素 必須指定高度，并設(shè)置overflow:hidden;
// 如要兼容IE6 必須給obj元素 指定 overflow:hidden;
function jsScroll(obj, w, className)
{
if(typeof(obj) == 'string') {
obj = document.getElementById(obj);
}
//當(dāng)內(nèi)容未超出現(xiàn)在高度時(shí)，不添加滾動(dòng)條
if(!obj || obj.scrollHeight <= obj.clientHeight || obj.clientHeight == 0) {
return;
}
obj.scrollBarWidth = w||6;
obj.style.overflow = 'hidden';
obj.scrollBar = document.createElement('div');
document.body.appendChild(obj.scrollBar);
obj.scrollBarIndex = document.createElement('div');
obj.scrollBar.appendChild(obj.scrollBarIndex);
obj.scrollBar.style.position = 'absolute';
obj.scrollBarIndex.style.position = 'absolute';
obj.scrollBar.className = className || '';
if(!className) {
obj.scrollBar.style.backgroundColor = '#ddd';
obj.scrollBarIndex.style.backgroundColor = '#aaa';
}
scrollDivList.push(obj);
scrollResetSize(obj);
//使用鼠標(biāo)滾輪滾動(dòng)
obj.scrollBar.scrollDiv = obj;
obj.scrollBarIndex.scrollDiv = obj;
obj.onmousewheel = scrollMove;
obj.scrollBar.onmousewheel = scrollMove;
obj.scrollBarIndex.onmousewheel = scrollMove;
//拖動(dòng)滾動(dòng)條滾動(dòng)
obj.scrollBarIndex.onmousedown = function(evt){
evt = evt || event;
scrollPageY = evt.clientY;
scrollY = this.scrollDiv.scrollTop;
isScrollMove = true;
document.body.onselectstart = function(){return false};
scrollMoveObj = this.scrollDiv;
if(this.scrollDiv.scrollBar.className == '') {
this.scrollDiv.scrollBarIndex.style.backgroundColor = '#888';
}
return false;
}
}
//當(dāng)頁(yè)面大小發(fā)生變化時(shí)，重新計(jì)算滾動(dòng)條位置
window.onresize = function(){
for(var i=0; i<scrollDivList.length; i++) {
scrollResetSize(scrollDivList[i]);
}
}
//計(jì)算滾動(dòng)條位置
function scrollResetSize(o) {
if(o.scrollHeight <= o.clientHeight) {
o.scrollTop = 0;
o.scrollBar.style.display = 'none';
} else {
o.scrollBar.style.display = 'block';
}
var x=0, y=0;
var p = o;
while(p) {
x += p.offsetLeft;
y += p.offsetTop;
p = p.offsetParent;
}
var borderTop = parseInt(o.style.borderTopWidth||0);
var borderBottom = parseInt(o.style.borderBottomWidth||0);
o.scrollBar.style.width = o.scrollBarWidth + 'px';
o.scrollBar.style.height = o.clientHeight + 'px';
o.scrollBar.style.top = y + borderTop + 'px';
o.scrollBar.style.left = x + o.offsetWidth - o.scrollBarWidth + 'px';
o.scrollBarIndex.style.width = o.scrollBarWidth + 'px';
var h = o.clientHeight - (o.scrollHeight - o.clientHeight);
//當(dāng)滾動(dòng)條滑塊最小20個(gè)像素
if(h < 20) {
h = 20;
}
o.scrollBarHeight = h;
o.scrollBarIndex.style.height = h + 'px';
o.scrollBarIndex.style.left = '0px';
setScrollPosition(o);
}
function setScrollPosition(o) {
o.scrollBarIndex.style.top = (o.clientHeight - o.scrollBarHeight) * o.scrollTop / (o.scrollHeight - o.clientHeight) + 'px';
}
document.documentElement.onmousemove = function(evt){
if(!scrollMoveObj)return;
evt = evt || event;
var per = (scrollMoveObj.scrollHeight - scrollMoveObj.clientHeight) / (scrollMoveObj.clientHeight - scrollMoveObj.scrollBarHeight)
scrollMoveObj.scrollTop = scrollY - (scrollPageY - evt.clientY) * per;
setScrollPosition(scrollMoveObj);
}
document.documentElement.onmouseup = function(evt){
if(!scrollMoveObj)return;
if(scrollMoveObj.scrollBar.className == '') {
scrollMoveObj.scrollBarIndex.style.backgroundColor = '#aaa';
}
scrollMoveObj = null;
document.body.onselectstart = function(){return true};
}
// 鼠標(biāo)滾輪滾動(dòng)
function scrollMove(evt){
var div = this.scrollDiv || this;
if(div.scrollHeight <= div.clientHeight) return true;
evt = evt || event;
var step = 20;
if(evt.wheelDelta < 0) {
if(div.scrollTop >= (div.scrollHeight - div.clientHeight)) return true;
div.scrollTop += step;
} else {
if(div.scrollTop == 0) return true;
div.scrollTop -= step;
}
setScrollPosition(div);
return false;
}
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。