mousewheel的火狐浏览器兼容

最新推荐文章于 2024-09-13 07:16:17 发布

前端小li

最新推荐文章于 2024-09-13 07:16:17 发布

阅读量617

点赞数 1

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/HTML5_student/article/details/120492679

版权

前端专栏收录该内容

32 篇文章 2 订阅

订阅专栏

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>