scrollHeight - clientHeight - scrollTop 等于 0.333251953125

开发中遇到一个需求：判断滚动到底部

一开始是这么判断的：

element.scrollHeight - element.clientHeight - element.scrollTop === 0

好像没什么问题，电脑浏览器上运行也没问题，但在手机上运行出问题了，没生效！

调试发现在手机上滚动到底部了 element.scrollHeight - element.clientHeight - element.scrollTop 等于 0.333251953125（HUAWEI Mate 30 Pro），并不等于0。

多个手机测试后发现有一小部分手机等于0，大部分手机都是0-1之间，那么为了兼容，可以这样判断:

element.scrollHeight - element.clientHeight - element.scrollTop < 1

延伸一下：滚动到底部加载更多

封装了个指令：

Vue.directive('loadmore', {
  bind(el, binding) {
    el.addEventListener('scroll', function() {
      if (this.scrollHeight - this.scrollTop - this.clientHeight < 1) {
        binding.value()
      }
    })
  }
})

<div v-loadmore="loadMore">...</div