JavaScript滚轮事件

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量2.8k 收藏 9
点赞数 7
文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43228946/article/details/126454400
版权

滑动鼠标的滚轮，从而实现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。

脚踏实地，坚持不懈!
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript滚轮事件例子
qq_46582421的博客
12-13 187
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <scri
javascript 滚轮事件
Allen专栏
03-08 917
IE6.0首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含
js的滚轮事件
个人笔记
03-26 3965
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //滚轮事属于鼠标事件 只是滚轮兼容性不一样 //滚轮事件直接加给文档 document
Javascript：元素滚动事件
听海边涛声
06-23 259
Javascript：元素滚动事件
javascript滚轮事件
weixin_30654583的博客
09-24 37
http://www.cnblogs.com/rubylouvre/archive/2010/05/01/1725462.html 转载于:https://www.cnblogs.com/tianma3798/p/3990463.html
JavaScript鼠标滚轮事件
Office文件在线预览解析
11-25 462
鼠标滚轮事件的实现： <script type="text/javascript"> var daxi = function(e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 ......
滚轮事件——js
mantou_riji的博客
04-08 791
滚轮事件——js 实现效果： 滚轮向上移动，变长； 滚轮向下移动，变短 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #box1{ width: 100px; height: 100px; background-color: rosybrown;
javascript中滚轮事件
plannothing的博客
08-17 1844
<!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/javas
监听滚轮事件
珈一.的博客
05-28 167
监听滚轮事件
javascript的鼠标滚轮事件
weixin_42410441的博客
03-14 318
javascript的滚轮事件onmousewheel鼠标滚轮滚动事件（火狐不支持)event.wheelDelta判断鼠标滚轮方向(火狐不支持)DOMMouseScroll鼠标滚动事件（火狐支持）event.detail判断鼠标滚轮方向(火狐支持)最后来个小栗子，实现div的高度可以随着鼠标滚轮像金箍棒一样伸缩 onmousewheel鼠标滚轮滚动事件（火狐不支持) 但是注意这个事件火狐不支持 document.onmousewheel = function (){ alert("我滚了")
JavaScript 滚轮事件使用说明
10-29
JavaScript 滚轮事件是网页开发中用于处理用户滚动鼠标滚轮时的一种交互方式，它可以帮助开发者实现诸如页面滚动、地图缩放等丰富的用户界面效果。在不同的浏览器中，滚轮事件的处理方式存在差异，这增加了跨浏览器...
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
javascript滚轮事件基础实例讲解（37）
10-20
主要为大家详细介绍了javascript滚轮事件基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【React 】开发环境搭建详细指南
lph159的博客
07-24 1101
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 326
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 122
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 157
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue 滚轮事件 debounce
07-11
在 Vue 中，你可以使用 `lodash` 库中的 `debounce` 函数来实现滚轮事件的防抖处理。首先，确保你已经在项目中安装了 `lodash` 库。 然后，在你的 Vue 组件中，可以按照以下步骤使用 `debounce` 函数来处理滚轮事件的防抖： 1. 导入 `lodash` 库中的 `debounce` 函数： ```javascript import { debounce } from 'lodash'; ``` 2. 在 `mounted` 钩子函数中，为滚轮事件绑定防抖处理函数： ```javascript mounted() { this.handleScroll = debounce(this.handleScroll, 200); // 200毫秒的防抖延迟 window.addEventListener('scroll', this.handleScroll); }, ``` 3. 在 `methods` 中定义滚轮事件的处理函数 `handleScroll`： ```javascript methods: { handleScroll() { // 处理滚轮事件的逻辑 // ... }, }, ``` 这样，每次滚轮事件触发时，会延迟 200 毫秒触发 `handleScroll` 函数，从而实现了滚轮事件的防抖处理。记得在组件销毁时移除滚轮事件监听： ```javascript beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }, ``` 这样就完成了在 Vue 中使用 `debounce` 函数进行滚轮事件的防抖处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值