mousewheel鼠标滚轮事件响应及实例

最新推荐文章于 2024-04-09 22:24:27 发布

你的莽莽没我的好吃

最新推荐文章于 2024-04-09 22:24:27 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： mousewheel 滚轮事件响应

本文链接：https://blog.csdn.net/LOG_IN_ME/article/details/100577548

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

mousewheel鼠标滚轮事件响应

兼容性：

除了FireFox浏览器的滚轮事件响应使用的是DOMMouseScroll以外，其余浏览器均使用的是onmousewheel（在使用addEventListener()添加监听事件的时候就把“onmousewheel”的“on”去掉，变成“mousewheel”。“onclick”等监听事件也是一样。）

使用：

document.body.onmousewheel = function(event){
		...编写响应函数...
	}

响应函数有event作参数，event有属性wheelDelta，鼠标滚轮向下滚动时event.wheelDelta属性值为负且是-120的倍数，相反，鼠标滚轮向上滚动时event.wheelDelta属性值为正且是120的倍数。（不同浏览器鼠标一次滚动时这个属性值变化值不一样，有的甚至连续滚动几次后会属性值变化会加快。不妨在网页中输出观察一下。）

实例

实现一个简单的进度条可以随着鼠标的滚动而变化进度：

首先用bootstrap4创建一个简单的进度条：

<div class="container">
	<div id="c">
		<h2>基本进度条</h2>
		<p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>
		<div class="progress" id="1" onclick="change()">
		  <div class="progress-bar" style="width:0%"></div>
		</div>
		<input type="button" id="btn" value="确定">
		<p></p>
	</div>
  
  <div id="space"></div>
  
</div>

初始默认进度为0。（style="width:0%"）

然后在<script>里<body>的滚轮响应监听事件中，用JS的DOM根据event.wheelDelta修改wdth这一属性值：

document.body.onmousewheel = function(event){
		var or = document.getElementsByClassName("progress-bar")[0].style.width;
		
		document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";
		document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";
	}

document.body.onmousewheel = function(event){}创建监听事件，当然你也可以用其他方法添加监听事件，但一定要带上参数event。

在监听事件里，var or = document.getElementsByClassName("progress-bar")[0].style.width;用一个变量or保存当前width的属性值。

document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";用DOM获取第二个<p>标签，在标签内装填当前进度值和event.wheelDelta属性值显示出来。

document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";使用CSS3的calc()函数来将进度变化值(-event.wheelDelta/100)加在原有的进度or上，注意做+-的时候，运算符前后要有空格。

你的莽莽没我的好吃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mousewheel鼠标滚轮事件响应及实例

mousewheel鼠标滚轮事件响应兼容性：除了FireFox浏览器的滚轮事件响应使用的是DOMMouseScroll以外，其余浏览器均使用的是onmousewheel（在使用addEventListener()添加监听事件的时候就把“onmousewheel”的“on”去掉，变成“mousewheel”。“onclick”等监听事件也是一样。）使用：document.body....
复制链接

扫一扫