在web页面中onscroll事件不触发的状况记录

起因

今日在用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%}导致的。

 

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

http://webfront-js.com/articaldetail/156.html