JS模拟简易滚动条效果代码(附demo源码)_javascript技巧
程序员文章站
2022-04-10 19:44:56
...
本文实例讲述了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 = (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程序设计有所帮助。