JS模拟简易滚动条效果代码（附demo源码）

本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下：
使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。
效果如下：

Js代码如下：

var scrollMoveObj = null, scrollPageY = 0, scrollY = 0;var scrollDivList = new Array（）;// obj需要添加滚动条的对象 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<scrollDivList.length; i++） {scrollResetSize（scrollDivList[i]）;}}//计算滚动条位置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）;//当滚动条滑块最小20个像素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};}// 鼠标滚轮滚动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;}

完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。