好资源导航 » 文章资讯 » js滚轮事件 js自定义滚动条的实现

js滚轮事件 js自定义滚动条的实现

2023-08-02 22:34:04 80

本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下

描述：

自定义滚动条的实现

效果：

实现：

varcontent=document.getElementById("content"); varbox=document.getElementById("box"); varscroll=document.getElementById("scroll"); varscrollBar=document.getElementById("scrollBar"); varStep={ value:0, size:20, maxVal:Math.ceil((content.offsetHeight-document.body.offsetHeight)/20), getCurrentVal:function(){ returnthis.value; }, next:function(){ if(this.value==this.maxVal)return; this.value++; }, pre:function(){ if(this.value==0)return; this.value--; }, getDistance:function(){ returnthis.getCurrentVal()*this.size; }, update:function(){ this.maxVal=Math.ceil((content.offsetHeight-document.body.offsetHeight)/this.size); } } window.addEventListener("resize",function(){ Step.update(); }); box.addEventListener("DOMMouseScroll",scrollfunc); box.addEventListener("mousewheel",scrollfunc); functionscrollfunc(e){ if(e.type=="mousewheel"){//非FF e.wheelDelta<0?Step.next():Step.pre(); }else{//FF e.detail>0?Step.next():Step.pre(); } document.title=Step.getCurrentVal(); box.scrollTop=Math.min(Step.getDistance(),content.offsetHeight-document.body.offsetHeight); //计算滚动比例 varpercent=box.scrollTop/(content.offsetHeight-document.body.offsetHeight); //显示滚动条 scroll.style.opacity=100; //计算滚动条的位置 scrollBar.style.top=(scroll.offsetHeight-scrollBar.offsetHeight)*percent+"px"; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js滚轮事件 js自定义滚动条的实现

热门推荐

随机推荐