mousewheel的火狐浏览器兼容

最新推荐文章于 2024-04-09 03:12:39 发布

原创最新推荐文章于 2024-04-09 03:12:39 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

前端专栏收录该内容

32 篇文章

订阅专栏

这篇博客探讨了在不同浏览器中处理鼠标滚轮事件的方法，包括谷歌浏览器的'mousewheel'事件和火狐的'DOMMouseScroll'事件。文章详细解释了如何通过event.wheelDelta在谷歌浏览器和event.detail在火狐浏览器中获取滚动步进值，并提供了示例代码来阻止元素滚动时的页面滚动。

mousewheel是谷歌浏览器的鼠标监听
DOMMouseScroll是狐火的
另外谷歌的event.wheelDelta值是120和-120；火狐上的event.detail值是-3和3

 <div :style="style">
	 <div id="inner"> 
	 </div>
 </div>
 <script>
 export default{
      data(){
         return{
          left:1,
         }
      },
      computed:{
        style(){
          return{
             width:xxx+"px",
             marginLeft:this.left+"px"
        }
      },
      mouted(){
		this.scrollInit();
	  },
	  methods:{
		scrollInit() {
			const scrollDiv = document.getElementById("inner");
			var that = this;
			var isFirefox=/Firefox/i.test (navigator.userAgent) ; //判断是不是火狐浏览器
			var mwEvent = !isFirefox ? 'mousewheel'; 'DOMMouseScroll'
			scrollDiv.addEventListener(mwEvent, handler, false);
				function handler(e) {
					let step = 0;
					if (e.detail < 0 || e.wheelDelta < 0) {
						step = 100;
					} else {
						step = -100;
					}
					that.left-=step;
					e.preventDefault(); //当元素滚动时页面滚动禁止
			    }
	    }		 	
	  }
 }

	 

 </script>