Javescript 检测滚轮事件滚动方向

最新推荐文章于 2023-04-03 13:03:06 发布

牛耕田ljx

最新推荐文章于 2023-04-03 13:03:06 发布

阅读量89

点赞数

分类专栏： Javascript web HTML 文章标签： js

本文链接：https://blog.csdn.net/weixin_41671709/article/details/103997259

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(event){
				var box1 = document.getElementById("box1");
				function fun(event){
				
					event=event||window.event;
					
					if(event.wheelDelta>0 || event.detail<0){
						//**检查滚轮是否向上滚动**
						box1.style.height=box1.clientHeight-10+"px";
					}else{
						//**检查滚轮是否向下滚动**
						box1.style.height=box1.clientHeight+20+"px";
					}
					
					//**取消浏览器的默认行为**
					event.preventDefault&&event.preventDefault();//**火狐**
					return false;//**其他浏览器**
					
				}
				box1.onmousewheel=fun;//**设置给谷歌IE使用**
				bind(box1,"DOMMouseScroll",box1.onmousewheel);//**设置给F

最低0.47元/天解锁文章

牛耕田ljx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javescript 检测滚轮事件滚动方向

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; backgro...
复制链接

扫一扫