javascript - getBoundingClientRect() inside »溢出 :scroll«

Question

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

FIDDLE

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

Answer 1

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

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

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

通过“ overflow hidden ”和“滚动”，您将向包装器 div 添加一个“小”类，它的高度和宽度固定为 200 像素。所以再次应用规则，它的宽度将是父级的 100%，现在是 200px。