js中的滚轮事件

末蓝、 2022-11-29 14:29 215阅读 0赞

描述：实现  
鼠标滚动时（向下），div变高，向上，变短  
onmousewheel 鼠标滚轮事件，但火狐中不支持  
火狐中使用DOMMouseScroll来绑定滚动事件  
该事件通过addEventListener()函数来绑定 event.wheelDelta来获取鼠标滚轮滚动的方向,向上滚是120,乡下滚是-120，火狐中不支持  
火狐中使用event.detail,向上滚是-3，向下滚是+3  
js代码：

window.onload = function(){
    				var box13 = document.getElementById("box13");
    				box13.onmousewheel = function(event){
    					event = event || window.event;
    					if(event.wheelDelta<0 || event.detail>0){
    						box13.style.height = box13.clientHeight + 20+"px"; 
    					}else{
    						box13.style.height = box13.clientHeight - 20+"px"; 
    						if(box13.clientHeight<20){
    							box13.style.height = 20+"px";
    						}
    					}
    					/*
    					 当滚轮滚动时，浏览器如果有滚动条，会随之滚动，
    					 这是浏览器默认行为，如果想取消，return false;
    					 * */
    					 event.preventDefault && event.preventDefault();
    					return false;
    				};
    				bind(box13,"DOMMouseScroll",box13.onmousewheel);
    			
    		/*		使用addEventListener()时，取消默认行为不能用return false;
    				应该使用 event.preventDefault();IE8不支持
    				 * */
    				
    			};
    		function bind(obj,eventStr,callback){
    				if(obj.addEventListener){
    					obj.addEventListener(eventStr,callback,false);
    				}else{
    				//调整this的调用对象，让他都指向调用它的对象，使用callback.call(obj)
    					//IE8及以下
    				//obj.attachEvent("on"+eventStr,callback);
    					obj.attachEvent("on"+eventStr,function(){
    					callback.call(obj);//由obj调用了
    					});
    				}
    			}

html代码：
     <body>
    	<div id="box13"></div>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关前端---js（自学笔记26)（滚轮的事件、键盘事件、键盘移动div）

滚轮的事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

不念不忘少年蓝@/ 2022年12月01日 14:22/ 0 赞/ 189 阅读

相关 js中的滚轮事件

描述：实现鼠标滚动时（向下），div变高，向上，变短 onmousewheel 鼠标滚轮事件，但火狐中不支持火狐中使用DOMMouseScroll来绑定滚动事件

末蓝、/ 2022年11月29日 14:29/ 0 赞/ 216 阅读

相关 Js中的事件

一、鼠标事件 1. mouseDownAction //鼠标按下的时候触发 2. mouseMoveAction //鼠标移动的时候触发 3. mouseUpAc

偏执的太偏执、/ 2022年06月10日 00:46/ 0 赞/ 185 阅读

相关鼠标滚轮事件

要达到效果是，滚动鼠标到一定距离，导航条出现，没有达到这个高度，滚动条消失鼠标滚轮监听需要用到插件 jquery.mousewheel.min.js v

我就是我/ 2022年06月01日 21:19/ 0 赞/ 643 阅读

相关 JavaScript——滚轮事件的浏览器兼容处理

js中的滚轮事件`onmousewheel`和滚动事件`onscroll`是两个不同的事件，这一点一定要区分开。一个很好的表现为：当我们在使用鼠标滚轮滑动滚动条的时候，滚轮

偏执的太偏执、/ 2022年05月18日 04:36/ 0 赞/ 250 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 700 阅读

相关鼠标滚轮事件

做一个用鼠标滚轮控制图片放大缩小的简单功能。 1.滚动时页面也会跟随滚动e.preventDefault()去掉默认事件。 2.Chrome、IE等浏览器，用mousewh

迷南。/ 2021年11月02日 02:14/ 0 赞/ 469 阅读

相关鼠标中键滚轮事件

![QQ_E6_88_AA_E5_9B_BE_E6_9C_AA_E5_91_BD_E5_90_8D.png][] 今天在开发的过程中为了有更好的用户体验，使用了滚轮事件，发上

客官°小女子只卖身不卖艺/ 2021年11月01日 14:00/ 0 赞/ 545 阅读

相关 JavaScript中监听鼠标滚轮事件

使用jQuery监听鼠标滚轮事件： <!DOCTYPE html> <html> <head> <meta charse

谁借莪１个温暖的怀抱￠/ 2021年10月18日 11:48/ 0 赞/ 529 阅读

相关 JS滚轮事件(mousewheel/DOMMouseScroll)了解

JS滚轮事件(mousewheel/DOMMouseScroll)了解一、学无止境、温故知新 //zxx: 本段与技术无关，一些很个人的吐槽，可以跳过已经没有了小学生...

红太狼/ 2020年06月18日 16:47/ 0 赞/ 745 阅读