JavaScript中监听鼠标滚轮事件

谁借莪１个温暖的怀抱￠ 2021-10-18 11:48 560阅读 0赞

*  使用jQuery监听鼠标滚轮事件：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>监听鼠标滚轮事件</title>
    	</head>
    
    	<body>
    		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    		<script type="text/javascript">
    			$(document).bind('mousewheel DOMMouseScroll', function(event) {
    				// IE/Chorme
    				var wheel = event.originalEvent.wheelDelta;
    				// Firefox
    				var detal = event.originalEvent.detail;
    				// 判断浏览器IE,谷歌滚轮事件
    				if(event.originalEvent.wheelDelta) {
    					// 当滑轮向上滚动时
    					if(wheel > 0) {
    						console.log("up");
    					}
    					// 当滑轮向下滚动时
    					if(wheel < 0) {
    						console.log("down");
    					}
    				}
    				// Firefox滚轮事件  
    				else if(event.originalEvent.detail) {
    					// 当滑轮向下滚动时
    					if(detal > 0) {
    						console.log("down");
    					}
    					// 当滑轮向上滚动时
    					if(detal < 0) {
    						console.log("up");
    					}
    				}
    			});
    		</script>
    	</body>
    
    </html>

如您在阅读中发现不足，欢迎留言！！！

发表评论取消回复

表情：

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

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

相关阅读

相关 Qt5.13监听鼠标滚轮的上下滚动事件QWheelEvent的angleDelta().y()

There are two ways to read the wheel event delta: angleDelta() returns the delta in whee

╰半橙微兮°/ 2022年12月23日 11:07/ 0 赞/ 244 阅读

相关 JavaScript权威指南_172_第17章_事件处理_17.6-鼠标滚轮事件

![Center][] [Center]: /images/20220714/906acb0163734e5cb07b79cc6e5aa2c9.png

梦里梦外;/ 2022年07月14日 11:41/ 0 赞/ 201 阅读

相关使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法

使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法 function autoRoll() { $(document).on("mou

迷南。/ 2022年06月12日 06:51/ 0 赞/ 441 阅读

相关鼠标滚轮事件

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

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

相关 Java中如何监听鼠标事件

当点击鼠标按钮时，有三个监听器方法可以调用：①鼠标按下时调用mousePressed；②鼠标被释放时调用mouseReleased；③关注鼠标的最终点击事件时调用mouseCl

今天药忘吃喽~/ 2022年05月28日 11:39/ 0 赞/ 610 阅读

相关 angular监听鼠标,键盘事件

关键词:$event 监听鼠标事件 <button (click)="onClick($event)"></button> $event 输出: Mous

以你之姓@/ 2022年05月20日 06:44/ 0 赞/ 708 阅读

相关 vue 监听滚轮滚动事件

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

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

相关鼠标滚轮事件

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

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

相关鼠标中键滚轮事件

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

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

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

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

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