起因
今日在用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%}导致的。
本文内容很简单,但是对于遇到此类问题的开发人员来说是很用的。