ホームページ > 記事 > ウェブフロントエンド > カスタム スクロール バー: html、css、および js コードの個別の実装手順
<p class="content" id="content"> <p class="con-scroll" id="countent"> js对于鼠标滚轮事件的监听 <br> 2017年08月25日 18:17:56 <br> 阅读数:10072 <br> 需求: <br> 通过鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的上下滚动后触发不同的事件。 <br> 实现: <br> 通过js对鼠标滚轮的事件进行监听。 <br> 描述: <br> 首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。 <br> 具体实现:1. 需要添加事件监听,代码如下:兼容firefox采用addEventListener监听 <br> /*监听鼠标滚动事件 <br> * 1.火狐的是:DOMMouseScroll; <br> * 2.IE/Opera/Chrome:直接添加事件*/ <br> if(document.addEventListener){ <br> document.addEventListener('DOMMouseScroll',scrollFunc,false); <br> }//W3C <br> window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome <br> var scrollFunc=function(e){ <br> e=e || window.event; <br> if(e.wheelDelta){//IE/Opera/Chrome <br> //自定义事件:编写具体的实现逻辑 <br> mouseScroll(); <br> }else if(e.detail){//Firefox <br> //自定义事件:编写具体的实现逻辑 <br> mouseScroll(); <br> } <br> } <br> 简要说明: <br> 判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±150,其中正数表示为向下,负数表示向上 <br> 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35647781/article/details/77584977 <br> </p> <p class="scroll-wrap" id="wrapScroll"> <span></span> </p> </p>
.content{ width: 500px; height: 400px; border:1px solid; overflow: hidden; padding:40px; margin:50px auto; position: relative; } .scroll-wrap{ position: absolute; width: 10px; height: 100%; background: #d8d4d4; top:0; right:0; } .scroll-wrap span{ display: block; width: 5px; height: 100px; background: red; border-radius: 10px; margin:0 auto; position: relative; }
<script> var wrapScroll=document.getElementById("wrapScroll") var tapScroll=wrapScroll.getElementsByTagName("span")[0]; var contentIn=document.getElementById("countent"); var content=document.getElementById("content") tapScroll.onmousedown=function(){ var e=e||window.event; var dowY=e.pageY-this.offsetTop; document.onmousemove=function(e){ var ev=e||window.event; var movY=ev.pageY-dowY; conmon(movY) } document.onmouseup=function(){ document.onmousemove=null; } } content.onmousewheel=function(event){ var stemp=tapScroll.offsetTop-content.offsetTop+50; conmon(stemp) } function conmon(num){ var dela=wheel(event) num=num<0?0:num; var c=wrapScroll.offsetHeight-tapScroll.offsetHeight dela>0?num-=10:num+=10; num=num>c?c:num tapScroll.style.top=num+"px"; var speed=(contentIn.offsetHeight-content.offsetHeight)/c+0.2; console.log(speed) contentIn.style.marginTop=-(speed*num)+"px" } //滚轮事件封装 function wheel(event){ var e=event||window.event; var delta=0;//次数 if(e.wheelDelta){ delta=e.wheelDelta/120; }else if(e.detail){ delta=e.detail/3; } if(e.preventDefault){ e.preventDefault() } return delta } </script>
関連推奨事項:
以上がカスタム スクロール バー: html、css、および js コードの個別の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。