javascript getBoundingClientRect（）值对于动态添加的元素是错误的

在万维网上找不到答案，所以在这里发布问题

我正在努力实现的目标：

当用户滚动到页面的最底部时，获取最新的动态加载元素的底部值，并使用它来确定是否该加载另一个元素

数学很简单：

if (element.getBoundingClientRect().bottom <= window.innerHeight)
   loadAnotherElement();

---

if（element.getBoundingClientRect（）.bottom在JS fiddle中，您发布了无法识别正确高度的原因，因为您的内部元素是浮动的。浮动不影响父元素的高度，因此我建议以下解决方案：

article:after {
    width: 100%;
    clear: both;
    content: '';
    display: block;
}

我还清理了一下小提琴，去掉了不必要的部分，这样就更容易看出错误所在（在你的部分前后显示的桌子样式没有任何优势）


var last=document.querySelector（'article'）；
document.addEventListener（'scroll'，function（）{
if（last.getBoundingClientRect（）.bottom我不是在一个简单的测试用例中看到这个问题：-所以你的问题可能不是javascript做了一些意想不到的事情，而是你的CSS对元素做了一些事情？@something在这里，我花了很长时间在JSFIDLE中重新创建了这个问题，但最终得到了解决。问题是父级中的元素正在向上移动到上一个pa租金。甚至不知道如何正确解释：）请看一看，你会发现问题我没有看到问题，在你触底时添加了更多的元素。变化似乎更像是CSS问题，而不是任何其他问题…偶尔会有漏洞，但效果很好（我正在使用Safari技术预览版，但我不认为这有什么区别）。我没有safari来测试是否有任何差异。在Firefox和Chrome中测试，两者似乎有相同的行为-当第二批元素加载时，第三批元素不再加载。我将永远不会在父元素中有6个子元素。它可以是7、8、15或任何数字，因此
article
元素不能有
display:inline-块
。要求没有任何间隙（子元素应位于的位置）在两个
文章
元素之间为什么不呢？为什么不在你的文章中添加更多的
div
？这可能是一个我已经考虑过的解决方案，但是在这种情况下，网站的分页将不起作用。
文章
元素是一个页面，但是分页可以被打开关闭并打开无限滚动，问题就出现了。我可能会使用您的第二个解决方案，重新编写代码，因为它似乎解决了我目前的问题。非常感谢您的输入！可能我只是过于复杂化了—花太多时间反复查看某些代码：）再次感谢：）@Morpheus我完全明白这一点，这种情况一直都在发生。当然，在你开始添加东西，然后担心如果你把它们拿走，它会破坏某些东西之后。我认为，有时候最好从零开始，而不是试图修复某些东西，因为修复某些东西需要很长时间，但从零开始可能会让你从一个角度来看待问题不同的方式：）干杯！