使用onscroll事件为滚动条滚动到最后时添加响应函数时出现火狐里面可以正常添加而chrome浏览器和egde浏览器不能的原因

本文链接：https://blog.csdn.net/S788977SS/article/details/130814107

使用onscroll事件为滚动条滚动到最后时添加响应函数时出现火狐里面可以正常添加而chrome浏览器和egde浏览器不能的原因

- 原因
- 改进方法

今天写一个练习，判断滚动条是否滚动到底部然后在滚动到底部时为他添加一个响应函数，源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #inf{
            width:300px;
            height:200px;
            background:blueviolet;
            overflow:auto;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var inp=document.getElementsByTagName("input");
            var inf=document.getElementById("inf");
             inf.onscroll=function(){
                    if(inf.scrollHeight-inf.scrollTop==inf.clientHeight){
                        inp[0].disabled=false;
                        inp[1].disabled=false;
                    } //当划到滚动条底部时将两个按钮设置为可勾选状态
                }
            }
    </script>
</head>
<body>
    <h3>欢迎注册</h3>
    <p id="inf">亲爱的用户，请认真阅读顾着，亲爱的用户，请认真阅读顾着，亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着，亲爱的用户，请认真阅读顾着，亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着亲爱的用户，请认真阅读顾着
    我已仔细阅读协议</p>
    我已仔细阅读协议<input type="checkbox" disabled="disabled" name="xy" />
    确认<input type="submit" value="确认" disabled="disabled" name="qr" />
</body>
</html>

上面通过inf.scrollHeight-inf.scrollTop==inf.clientHeight这个语句作为条件来判断时，在火狐上可以正常修改，而到了谷歌和egde上面当滚动条滚动到最底部时却没有任何效果。

原因

原因如下：
通过

window.οnlοad=function(){
            var inp=document.getElementsByTagName("input");
            var inf=document.getElementById("inf");
             inf.οnscrοll=function(){
                    console.log(inf.scrollHeight-inf.scrollTop);
                    console.log(inf.scrollTop);
                    console.log(inf.scrollHeight);
                    console.log(inf.clientHeight);
                    console.log(inf.scrollHeight-inf.scrollTop==inf.clientHeight);
                ｝

这段代码去测试发现，在三个浏览器上返回的效果都不同
在谷歌和egde上：
在这里插入图片描述
在火狐上：

由此可见上面的两个浏览器返回的scrollTop值是浮点数，造成了上面判断条件的两边并不相等，因此运行时没反应

改进方法

通过对前面的scrollTop取整或对scrollHeight-scrollTop取整：

Math.round(inf.scrollHeight-inf.scrollTop)==inf.clientHeight

将==改为<=