使用函数防抖监听vue鼠标滚轮事件
需求:全屏滚动页面中鼠标滚轮滚动,指定时间内触发滚动时间不重复执行1、先定义防抖函数// 函数防抖const debounce = (func, wait = 100, immediate = true) => {let timerreturn (...args) => {let context = thisif (timer) clearT...
·
需求:全屏滚动页面中鼠标滚轮滚动,指定时间内触发滚动时间不重复执行
1、先定义防抖函数
// 函数防抖
// immediate - 是否首次执行
const debounce = (func, dalay = 100, immediate = true) => {
let timer, callNow = immediate;
return (...args) => {
if (timer) clearTimeout(timer);
if (callNow) {
func(...args);
callNow = false;
}
timer = setTimeout(() => {
func(...args);
}, dalay)
}
}
export { debounce }
2、在需要使用函数防抖的组件中导入
<script>
import { debounce } from '@/utils/util'
export default {
mounted() {
window.addEventListener('mousewheel', debounce(this.handleScroll), false)
window.addEventListener('DOMMouseScroll', debounce(this.handleScroll), false)
},
methods: {
handleScroll(e) {
console.log(e.deltaY) // 正值为向下滚动,负值为向上滚动
}
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)