js实现触底加载时，scrollTop是小数所带来的问题

功能场景

一个列表初始展示20条数据，滚动条触底实现请求接口，继续加载数据实现无限加载的效果。

问题

最初开发思路是页面监听滚动条事件，滚动条距离顶部的高度+页面可视区的高度=滚动条的总高度，来判断滚动条是否触底来触发事件，进行数据的更新加载操作：

handleScroll(e){
	//变量scrollTop是滚动条滚动时，距离顶部的距离
    let scrollTop = e.target.scrollTop;
    //变量windowHeight是可视区的高度
    let windowHeight = e.target.clientHeight;
    //变量scrollHeight是滚动条的总高度
    let scrollHeight = e.target.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop + windowHeight == scrollHeight){
         this.getMore(); //加载数据事件
    }
},

实际情况下，在1080等常见的开发屏幕下并不会出现什么问题都能正常的触发，但在用户那边确遇到了情况无法实现触底加载的效果，滚动条在底部时并没有触发this.getMore()这个方法。

排查原因

经过一系列的代码测试和查询资料后，发现scrollTop会出现小数的现象因为各个电脑的dip不是很相同，所以出现了像素在各个电脑上边表现得效果也不一样。在1080的电脑上也找到的复现问题的方法，把网页放大到125%，就会出现这种情况：

解决

找到了问题的原因，相应的改进方法也就有了，我这边采用的是去完善滚动条触底的判断条件，巧妙地运用大于小于号而不是让条件相等是触发：

handleScroll(e){
	//变量scrollTop是滚动条滚动时，距离顶部的距离
    let scrollTop = e.target.scrollTop;
    //变量windowHeight是可视区的高度
    let windowHeight = e.target.clientHeight;
    //变量scrollHeight是滚动条的总高度
    let scrollHeight = e.target.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop + windowHeight + 1 >= scrollHeight){
         this.getMore(); //加载数据事件
    }
},

使用大于等于和+1来使条件判断更加完善并满足需求