关于el-select 下拉加载更多 触底不加载的问题

问题

缩小差了0.5 没有触底

放大看看

缩放到90%

80%

相差 1px

67% 多了0.5

75%

50% 没有问题 可以下拉成功！

33% 没问题

25% 不行

试过如果多加10px 40px 下拉触底会调用多次接口 pageNum会一直加

const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight + 1

放大不会改变他的高度

缩小会变小

参考：blog.csdn.net/weixin_4248…

Vue.directive('selectLoadMore', {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector(
      '.el-select-dropdown .el-select-dropdown__wrap'
    )
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
})

更改：

// directives.js
import Vue from 'vue'

Vue.directive("loadmore", {
    bind(el, binding, vnode) {
        const SELECTWRAP = el.querySelector(
            ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP.addEventListener("scroll", function () {
            // scrollTop 这里可能因为浏览器缩放存在小数点的情况，导致了滚动到底部时
            // scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致无法请求更多数据
            // 这里将scrollTop向上取整 保证滚到底部时，触发调用
            const CONDITION = this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight;
            // el.scrollTop !== 0 当输入时，如果搜索结果很少，以至于没看到滚动条，那么此时的CONDITION计算结果是true，会执行bind.value()，此时不应该执行，否则搜索结果不匹配
            if (CONDITION && this.scrollTop !== 0) {
                binding.value();
            }
        });
    },
});