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

以你之姓@ 2023-03-13 05:18 13阅读 0赞

## 起因 ##

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

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

## onscroll不触发的原因和解决 ##

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

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <span style="color:#000000;"><code>html,body{ </code><code>overflow</code><code>:</code><code>auto</code><code>;</code><code>height</code><code>:</code><code>100%</code><code>;}</code></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这行代码一般会出现在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][http_webfront-js.com_articaldetail_156.html]

[http_webfront-js.com_articaldetail_156.html]: http://webfront-js.com/articaldetail/156.html