本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下：
使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。
效果如下：
Js代码如下：
添加滚动条的对象 w滚动条宽度 className滚动条样式名称
// obj元素 必须指定高度，并设置overflow:hidden;
// 如要兼容IE6 必须给obj元素 指定 overflow:hidden;
function jsScroll(obj,w,className)
{
if(typeof(obj) == 'string') {
obj = document.getElementById(obj);
}
//当内容未超出现在高度时，不添加滚动条
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);
//使用鼠标滚轮滚动
obj.scrollBar.scrollDiv = obj;
obj.scrollBarIndex.scrollDiv = obj;
obj.onmousewheel = scrollMove;
obj.scrollBar.onmousewheel = scrollMove;
obj.scrollBarIndex.onmousewheel = scrollMove;
//拖动滚动条滚动
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;
}
}
//当页面大小发生变化时，重新计算滚动条位置
window.onresize = function(){
for(var i=0; i= (div.scrollHeight - div.clientHeight)) return true;
div.scrollTop += step;
} else {
if(div.scrollTop == 0) return true;
div.scrollTop -= step;
}
setScrollPosition(div);
return false;
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
原文链接：https://www.f2er.com/js/49409.html