»overflow:scroll« 中的 getBoundingClientRect()答案

【问题标题】：getBoundingClientRect() inside »overflow:scroll«»overflow:scroll« 中的 getBoundingClientRect()
【发布时间】：2013-12-18 09:43:27
【问题描述】：

我想使用getBoundingClientRect() 计算元素的实际大小。如果元素位于具有给定大小和overflow:scroll 的容器内，则该方法的结果会有所不同。

无论是否在 »overflow:scroll« 上下文中，如何始终获取元素的总大小？

【问题讨论】：

【解决方案1】：

高度总是正确返回，所以我相信它是您关心的宽度。在这种情况下，您的小提琴也会为您提供正确大小的元素。方法如下 -

记住规则 - 除非指定，否则元素的宽度将是父元素的 100%。

使用“默认溢出”设置，您没有设置父包装器的宽度，因此根据规则，它采用父级的 100% 宽度，沿链向上将是窗口宽度。

使用“溢出隐藏”和“滚动”，您将向具有固定高度和宽度的 200 像素的包装 div 添加一个“小”类。所以再次应用规则，它的宽度将是父级的 100%，现在是 200px。

【讨论】：