js中的滚轮事件

末蓝、 2022-11-29 14:29 229阅读 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 条评论，229人围观）

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

相关阅读

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

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

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

相关 js中的滚轮事件

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

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

相关 winfrom-容器控件对象的滚轮事件

滚轮事件发生一定要激活当前的目标控件，比如目标控件要有焦点，事件本身简单，就是MouseWheel 下面举例panel： private void panelspl

川长思鸟来/ 2022年07月12日 01:09/ 0 赞/ 159 阅读

相关鼠标滚轮事件

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

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

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

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

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

相关 vue 监听滚轮滚动事件

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

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

相关鼠标滚轮事件

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

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

相关鼠标中键滚轮事件

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

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

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

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

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

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

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

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