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

补充3:
横向滚动和纵向滚动不能放在同一个元素上面,否则移动端会出现同时触发的情况

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容