在web页面中onscroll事件不触发的状况记录
2018-02-05 22:14

起因

今日在用vue开发前端页面的时候,需要添加一个无限加载的效果。这时候就用到了onscroll事件,拿出来以前开发的无限加载的vue组件来使用,发现并没有实现预期的效果。然后进行排查,发现是一直不触发onscroll事件。

既然找到了问题的所在,就要找到解决的办法,排查了好久,发现是因为css样式导致的scroll事件不触发。

onscroll不触发的原因和解决

这种scroll事件不触发的原因是因为下面这样一段css代码:

html,body{overflow:auto;height:100%;}

这行代码一般会出现在reset的css重置文件中,而它就是导致onscroll事件不触发的元凶。

我们只要把这行代码去掉或者稍作修改就能解决问题。

细看上面的代码,其实两句css代码是冲突的,html,body设置height:100%,那么我们就是希望单屏页面的效果,然后又添加overflow:auto或者overflow:scroll就是说页面可以滚动,那么既然页面可以滚动,那还要height:100%有什么作用。

并且出现onscroll事件不触发的情况是html和body同时设置{overflow:auto;height:100%}导致的。


本文内容很简单,但是对于遇到此类问题的开发人员来说是很用的。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1020)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1