hooks icon indicating copy to clipboard operation
hooks copied to clipboard

fix: fix getClientHeight error

Open p0page opened this issue 2 years ago • 4 comments

🤔 这个变动的性质是?

  • [ ] 新特性提交
  • [x] 日常 bug 修复
  • [ ] 站点、文档改进
  • [ ] 演示代码改进
  • [ ] TypeScript 定义更新
  • [ ] 包体积优化
  • [ ] 性能优化
  • [ ] 功能增强
  • [ ] 国际化改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 其他改动(是关于什么的改动?)

🔗 相关 Issue

#1515

💡 需求背景和解决方案

目前的代码在传入useInfiniteScroll的target缺少clientHeight字段时,无法正确获取到视图的高度,导致代码无法正常运作。

📝 更新日志

语言 更新描述
🇨🇳 中文 修复getClientHeight方法有可能获取到错误数据的问题

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

p0page avatar Mar 22 '22 13:03 p0page

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Mar 22 '22 13:03 CLAassistant

这里我看了一下,之前应该是没有问题的。

document.body.clientHeight 是指 body 的容器高度,而不是浏览器窗口高度。

image

普通情况下,因为 body 会被撑起来,所以 body 自己的高度确实等于 scrollHeight。

如果我们需要 body 内部滚动,则需要给 body 定高,比如我们给 body 加上 css

body{
   height: 100vh;
}

此时 document.body.clientHeight 高度就正确了。

image

整体思考是这样的,要监听某个容器内的滚动,那这个容器一定是定高的,不会被内容无限撑大。

brickspert avatar Mar 23 '22 02:03 brickspert

但其实,在监听对象为 document 的情况下,浏览器的窗口本身就可以被视之为是那个定高的容器。 body被自然撑高应该是一个比较常见的情况,我觉得可以考虑对这种情况进行支持。至少可以在文档中对hooks的使用限制进行更加明确的说明。

p0page avatar Mar 23 '22 02:03 p0page

但其实,在监听对象为 document 的情况下,浏览器的窗口本身就可以被视之为是那个定高的容器。 body被自然撑高应该是一个比较常见的情况,我觉得可以考虑对这种情况进行支持。至少可以在文档中对hooks的使用限制进行更加明确的说明。

这里比较合理的应该是不支持 document,需要清晰的定义 document.body

brickspert avatar Mar 23 '22 03:03 brickspert

The related issue of this PR has already solved in: https://github.com/alibaba/hooks/pull/2119

liuyib avatar Sep 27 '23 06:09 liuyib