JavaScript滚轮事件

滑动鼠标的滚轮，从而实现div的高度发生变化。当我们的下滑的时候，div的高度变高，上滑高度变低。
具体的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d {width: 800px;height: 100px;background-color: yellow;}</style><script>window.onload = function () {var d = document.getElementById("d");d.onwheel = function (event) {console.log("开始滚动");event = event || window.event;if (event.wheelDelta > 0 || event.detail < 0) {//向上滚，box1变短d.style.height = d.clientHeight - 10 + "px";console.log("变短");} else {//向下滚，box1变长d.style.height = d.clientHeight + 10 + "px";console.log("变长");}event.preventDefault && event.preventDefault();return false;};bindObj(d, "DOMMouseScroll", d.onmousewheel);};function bindObj(obj, eventStr, callback) {if (obj.addEventListener) {//大部分浏览器兼容的方式obj.addEventListener(eventStr, callback, false);} else {/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function () {//在匿名函数中调用回调函数callback.call(obj);});}}</script>
</head><body><div id="d"></div>
</body></html>

现在，我们大概看下代码的具体逻辑。首先我们通过id获取div的对象d,接着给给d设置滚动事件 onmousewheel，接着我们要判断滚动的方向，event.wheelDelta > 0表示向上滚，event.detail < 0也表示向上滚，这里需要注意下event.wheelDelta不支持·火狐浏览器。如果我们在有浏览器中，在div里面进行滚动，浏览器的滚动给条也会跟着滚动，这样体验不太好。为了解决这个问题，我们在代码里返回false,就可以解决这个问题。还有一种情况，使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event来取消默认行为event.preventDefault();但是IE8浏览器不支持event.preventDefault()这个方法，如果直接调用，就会报错。
onmousewheel不支持火狐浏览器，所以为了支持火狐浏览器，我们需要重新顶一个绑定方法，在这个方法里，我们需要使用addEventListener。

JavaScript滚轮事件相关推荐

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
html页面禁止滚轮事件,javascript实现禁止鼠标滚轮事件
平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力.而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了.除了火狐之外,所有的浏览器都可以使用MouseWhee ...
13.4.3 鼠标与滚轮事件【JavaScript高级程序设计第三版】
鼠标事件是Web 开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备.DOM3 级事件中定义了9 个鼠标事件,简介如下. click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发.这 ...
javascript 鼠标事件总结
本文转自:http://www.jb51.net/article/21590.htm javascript的鼠标事件是个比较庞大的家族.需要的朋友可以参考下. 常见的有以下8个: mousedown: ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
鼠标滚轮事件及解决滚轮事件多次触发问题
转载:https://www.cnblogs.com/jjxhp/p/11736066.html#_label0 一.滚轮事件的 js 写法二.jQuery写法三.参考四.滚轮事件滚动过快,事件 ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流 ...

JavaScript滚轮事件

JavaScript滚轮事件相关推荐

最新文章

热门文章