【VUE】JS监听鼠标上下滚动事件

文章介绍了在Vue应用中如何监听页面及div元素的鼠标滚动事件。通过`mounted`生命周期钩子添加事件监听器,使用`DOMMouseScroll`和`onmousewheel`处理不同浏览器的兼容性,`scrollFunc`方法处理滚轮向上和向下的事件,通过`wheelDelta`(IE/Opera/Chrome)或`detail`(Firefox)来判断滚动方向。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【VUE】JS鼠标滚动监听事件

一、给页面绑定滑轮滚动事件
mounted() {
	//给页面绑定滑轮滚动事件
	if(document.addEventListener){
	    document.addEventListener('DOMMouseScroll',this.scrollFunc,false);
	} //W3C
	//滚动滑轮触发scrollFunc方法
	window.onmousewheel = document.onmousewheel = this.scrollFunc; //IE/Opera/Chrome
}

method() {
	/** 鼠标滚轮事件 向上触发放大,向下 缩小*/
    scrollFunc(e){
      e = e || window.event;
      if(e.wheelDelta){ //IE/Opera/Chrome
      	console.log(e.wheelDelta); // +120表示向上;-120表示向下
      } else if (e.detail) {  //Firefox滑轮事件
         console.log(e.detail); // +3表示向上;-3表示向下
      }
    },
}

二、给div绑定滑轮滚动事件
<div id="divBox">指定的DIV范围</div>
var div = document.getElementById('divBox');
//给div绑定滑轮滚动事件
if(div.addEventListener){
 	div.addEventListener('DOMMouseScroll',this.scrollFunc,false);
} //W3C
//滚动滑轮触发scrollFunc方法
div.onmousewheel = div.onmousewheel = this.scrollFunc; //IE/Opera/Chrome
### Vue 中实现监听滚动滚动事件Vue 应用程序中,可以通过多种方式来监听滚动条的滚动事件。以下是几种常见的方法: #### 使用原生 JavaScript 和 `mounted` 生命周期钩子 可以在组件的 `mounted` 阶段绑定全局或特定元素上的滚动事件处理器。 ```javascript export default { mounted() { window.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(event) { console.log('Window scrolled:', event.target.documentElement.scrollTop); } }, beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); } } ``` 对于监听某个具体 DOM 元素内的滚动,则需获取该元素并为其添加相应的事件监听器[^1]。 #### 利用自定义指令简化操作 为了更优雅地处理滚动逻辑,还可以创建一个自定义指令用于自动注册/注销滚动事件侦听器。 ```javascript Vue.directive('scroll', { bind(el, binding, vnode) { const f = function(evt) { if (binding.value(evt, el)) { window.removeEventListener('scroll', f); } }; window.addEventListener('scroll', f); } }); ``` 之后便可在模板内轻松应用此指令。 #### 借助第三方库增强功能 当项目需求较为复杂时,考虑引入专门设计用来解决这类场景下性能优化等问题的插件可能是更好的选择。例如,使用 vue-infinite-scroll 插件能够极大地方便开发者快速集成无限滚动特性而不必担心底层细节。 针对鼠标滚轮引发频繁调用的情况,可以采用 @mousewheel 方案加以改进。这种方式不仅有效减少了不必要的重复触发次数,同时也改善了用户体验中的流畅度表现[^2]。 另外值得注意的是,在某些情况下可能还需要配合 CSS 或者 JS 来调整页面布局结构以及控制元素样式变化以达到最佳视觉呈现效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值