vue中使用@scroll不生效的问题

简介: vue中使用@scroll不生效的问题

问题描述:给一个div绑定@scroll,发现滚动的时候不生效

问题解决:可能会奇怪,明明页面滚动了呀,为什么没有触发scroll事件呢,大概率是滚动事件不是div触发的,大家可以写成window.addEventListener('scroll',function(){})就会生效。

解决办法:

1:如果可以接受使用window.addEventListener,那么如果你发现滚动不生效的时候,就可以使用,绝对生效

2:如果不想使用办法1,坚持想往div上绑定scroll事件的,那么可以有两个办法:
(1)给dev设置高度,并且overflow-y:auto或者scroll都可以
(2)dev的position:absoulte或者fixed,并且overflow-y:auto或者scroll都可以

补充1:
scroll事件对于普通Element元素是不冒泡的,可参见MDN:

Bubbles Not on elements, but bubbles to the default view when fired on the document

补充2:
常见不会冒泡的事件:scroll,blur,focus,mouseleave , mouseenter

相关文章
|
6天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
36 11
|
6天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
195 65
|
6天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
194 62
|
5天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
19 10
|
5天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
23 9
|
5天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
20 7
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
6天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
3天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
3天前
|
JavaScript
vue学习(10)事件修饰符
vue学习(10)事件修饰符
14 3