根据this answer on stackoverflow scrollHeight，clientHeight和offsetHeight都会返回不同的值。
scrollHeight属性
是元素内容高度的度量，包括 内容因溢出而在屏幕上不可见
clientHeight
以像素为单位返回元素的内部高度，包括填充 但不是水平滚动条高度，边框或边距
的offsetHeight
是包含元素边界元素的度量 垂直填充，元素水平滚动条（如果存在，如果 渲染）和元素CSS高度。
然而，当我测试这些属性时，它们返回了相同的值。这在Chrome，Firefox和IE中都是如此。我在下面列出了所有3种方法的测试代码。我究竟做错了什么？它们不应该返回不同的值吗？
scrollHeight值
"use strict"
console.log(document.querySelector('.testDiv').scrollHeight);.testDiv {
background-color: red;
padding: 10px
}<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
clientHeight值
"use strict"
console.log(document.querySelector('.testDiv').clientHeight);.testDiv {
background-color: red;
padding: 10px
}<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
offsetHeight值
"use strict"
console.log(document.querySelector('.testDiv').offsetHeight);.testDiv {
background-color: red;
padding: 10px
}<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
答案 0 :(得分：1)
在您的示例中，div本身不会滚动，您看到的滚动属于正文，这就是您看到相同结果的原因...试试这个：
const el = document.querySelector('.testDiv');
console.log('clientHeight:', el.clientHeight);
console.log('scrollHeight:', el.scrollHeight);
console.log('offsetHeight:', el.offsetHeight);.testDiv {
background-color: red;
border: 50px solid yellow;
height: 500px;
overflow: auto;
}<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
答案 1 :(得分：0)
这三个值必然相同，但它们当然可以相同，就像内容不必滚动时一样，垂直填充为零，没有边框。