scrollHeight 属性的介绍

什么是 scrollHeight ?

scrollHeight 属性是用于获取一个元素的内容高度的只读属性，包括被隐藏的部分（即溢出的部分）和 padding，但是不包括边框和外边距。

如何使用 scrollHeight ?

可以使用原生的 JavaScript 或者 jQuery 来获取元素的 scrollHeight 属性。

使用原生的 JavaScript

let element = document.querySelector('#my-element');
let scrollHeight = element.scrollHeight;
console.log(scrollHeight);

使用 jQuery

let $element = $('#my-element');
let scrollHeight = $element[0].scrollHeight; // jQuery对象转化为原生的 DOM 对象获取 scrollHeight
console.log(scrollHeight);

Demo

可以使用以下代码在页面上测试元素的 scrollHeight 属性：

<div id="my-element" style="height: 100px; overflow-y: scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus fringilla turpis, sit amet sodales mauris eleifend ut. Nullam eget massa sodales, laoreet lectus vitae, condimentum est. Maecenas et massa at nibh pellentesque lobortis sit amet eu mi. Nullam quis tortor in nisi varius interdum sed quis sem. Fusce lobortis enim ac posuere sodales. Morbi euismod leo felis, quis iaculis velit consectetur nec. Vestibulum at justo lorem.

Suspendisse hendrerit lorem vel libero blandit, sed congue ex posuere. Phasellus suscipit egestas mauris eu rutrum. Mauris eu sollicitudin quam. Morbi laoreet lacus quis sapien mattis, vitae gravida arcu commodo. In hac habitasse platea dictumst. Nam dictum elit arcu, in faucibus orci gravida eu. Quisque bibendum placerat quam, eu aliquet eros dapibus in. Proin in turpis id mauris pulvinar accumsan. Donec at nulla scelerisque, sagittis ante in, porttitor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ac arcu in nisl suscipit feugiat auctor ac mauris. Nunc fermentum eu nibh id ultrices.

Donec vulputate magna eget justo lobortis vehicula. Duis augue lorem, mattis at lectus non, consectetur elementum velit. Aliquam ornare enim et lacinia varius. Suspendisse blandit quam eu nisl dictum viverra. Vivamus ullamcorper ante vel orci auctor, vel hendrerit justo commodo. Etiam interdum nulla vel risus malesuada, quis luctus odio semper. Nulla facilisi. Proin sed mi id ipsum interdum ullamcorper. Maecenas euismod velit nibh, a consectetur quam imperdiet vitae.

Proin lacus enim, maximus sit amet ipsum ut, malesuada facilisis nisl. Sed elit elit, varius vel pulvinar eu, pellentesque in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Sed vitae erat ipsum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean iaculis mauris sapien, ac gravida lorem facilisis at.

Nam vulputate volutpat ligula eget commodo. Phasellus aliquet justo lorem, sit amet suscipit erat efficitur at. Mauris euismod neque vel velit posuere dictum. Etiam scelerisque convallis ipsum. Nam ullamcorper sollicitudin ante vestibulum lobortis. Curabitur suscipit commodo tellus, vel venenatis tellus pharetra vitae. Donec at dolor ullamcorper, bibendum nisl in, fringilla nisl. Fusce quis gravida felis.
</div>

通过调整 div 的 style 属性，可以测试不同的 scrollHeight 值。

注意事项

• scrollHeight 属性是只读的，不能设置。
• scrollHeight 属性不包括边框和外边距。
• scrollHeight 属性是包括溢出的部分（即被隐藏的部分）在内的。

以上就是 scrollHeight 属性的介绍，希望对您有所帮助！