这里感觉好奇怪啊，我的为什么没有显示视频的效果

Question

 const { run: tryLoadMore } = useDebounceFn(
    () => {
      const elem = containerRef.current
      if (elem === null) return
      const domRect = elem.getBoundingClientRect()
      if (domRect === null) return
      console.log(domRect.bottom, document.body.clientHeight)
      if (domRect.bottom <= document.body.clientHeight) {
        console.log('执行加载')
      }
    },
    { wait: 300 }
  )

document.body.clientHeight是整个文档的高度，文档肯定包含containerRef元素
这就导致了domRect.bottom 必定是小于document.body.clientHeight，怎么弄刷新页面都会执行，随便滚动都会执行，因为domRect.bottom 必定是小于document.body.clientHeight，不知道为什么老师的代码可以做到划到底部触发事件

Answer 1

双越 2023-10-10 08:20:08

你看看一开始 elem 的 height 是多少，和 body.clientHeight 哪个大

• 提问者 Valar丶Morghulis #1

  elem 的 height 是19px,body.clientHeight是1393px。

• 提问者 Valar丶Morghulis #2

  比对了两遍的代码找到问题原因了。吐了。
  我的代码没有入引入import 'antd/dist/reset.css' 
  html, body{height:100%}
  应该就是受上面这个height:100%影响的。
  有height：100% 刷新页面document.body.clientHeight的值是当前文档的高度，此时div都没渲染出来也就是不带滚动条的高度。

• 提问者 Valar丶Morghulis #3

  useDebounceFn 感觉有闭包陷阱，滚动后再次调用document.body.clientHeight这个值其实还是第一次进来的值，正常应该是整个文档的高度带上滚动条的。

点开查看后面3条评论