分别了解offsetWidth，clientWidth，scrollWidth和-Height

HTML CSS

理查德Itachi

2020-03-20

在StackOverflow上有几个关于offsetWidth / clientWidth / scrollWidth（分别是-Height和）的问题，但是没有一个问题可以全面解释这些值是什么。

另外，网络上有多个来源提供令人困惑或不正确的信息。

您能否给出完整的解释，包括一些视觉提示？另外，这些值如何用于计算滚动条宽度？

第2468篇《分别了解offsetWidth，clientWidth，scrollWidth和-Height》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
NearLHarry 2020.03.20

如果您想使用scrollWidth来获取“实际” 内容的宽度/高度（因为内容可能比css定义的width / height-Box大），那么当某些浏览器似乎“移动”了paddingRIGHT时，scrollWidth / Height是非常不可靠的＆paddingBOTTOM（如果内容太大）。然后，他们将填充物放在“太宽/太高”的右/底部（请参见下图）。

==>因此，要在某些浏览器中获得真实内容宽度，您必须从scrollwidth中减去两个填充，而在某些浏览器中，您仅需减去LEFT Padding。

我为此找到了解决方案，并希望将其添加为注释，但不允许这样做。所以我拍了张照片，使它的“移动的填充”和“不可靠的scrollWidth”更加清晰了。在蓝***域中，您可以找到有关如何获得“真实”内容宽度的解决方案！

希望这有助于使事情变得更加清晰！

在此处输入图片说明

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android