要检查矩形元素是否完全在窗口视口内,我可以这样做:
// NOTE: Only vertical checks shown. Remember that y increases while going down the page.
if (top > window.scrollY && bottom < document.documentElement.clientHeight + window.scrollY)
然而,有些网站的所有元素都有绝对位置(!!((示例(。在这些情况下,document.documentElement.clientHeight
为0,检查将失败(更新:显然,值为0的情况发生在Firefox上,而不是Chrome或Edge上(。
我试图通过在这些情况下使用window.innerHeight
来解决这个问题,但它包含了水平滚动条的高度。
我不想假设滚动条的像素高度是固定的,也不想创建用于计算的临时HTML元素,而且我不使用jQuery。我看到过用offsetHeight - clientHeight
计算滚动条高度的代码,但这在这里不起作用,因为两者都是0。
我有什么选择?这感觉像是一个极其重复的问题,但事实是我找不到答案。谢谢
使用document.body.clientHeight
而不是document.documentElement.clientHeight
,它应该在Firefox和Chrome上都能工作。
关于两者之间差异的更多解释如下:document.dococumentElement.clientHeight和document.body.clientHeight之间的差异