scroll系列的这几个属性都是和滚动有关的,上代码:
<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>scroll</title><style>.content {width: 350px;height: 300px;background-color: pink;padding: 10px;margin: 100px auto;overflow: scroll;}</style><script>window.addEventListener('load', function() {let contentDiv = document.querySelector('.content');contentDiv.addEventListener('scroll', function() {console.log('scrollTop:' + contentDiv.scrollTop);});});</script>
</head><body><div class="content">纳兰性德（1655年1月19日—1685年7月1日），叶赫那拉氏，字容若，号楞伽山人，满洲正黄旗人，清朝初年词人，原名纳兰成德，一度因避讳太子保成而改名纳兰性德。大学士明珠长子，其母为英亲王阿济格第五女爱新觉罗氏。 纳兰性德自幼饱读诗书，文武兼修，十七岁入国子监，被祭酒徐元文赏识。十八岁考中举人，次年成为贡士。康熙十二年（1673年）因病错过殿试。康熙十五年（1676年）补殿试，考中第二甲第七名，赐进士出身。纳兰性德曾拜徐乾学为师。他于两年中主持编纂了一部儒学汇编——《通志堂经解》，深受康熙皇帝赏识，为今后发展奠定基础。纳兰性德于康熙二十四年（1685年）五月三十日（1685年7月1日）溘然而逝，年仅三十岁（虚龄三十有一）。纳兰性德的词以“真”取胜，写景逼真传神，词风“清丽婉约，哀感顽艳，格高韵远，独具特色“。著有《通志堂集》、《侧帽集》、《饮水词》等。</div>
</body></html>
scrollTop是内容向下滚动的距离,同理scrollLeft是内容向右滚动的距离.再来打印一下scrollHeight:
window.addEventListener('load', function() {let contentDiv = document.querySelector('.content');console.log('scrollHeight:' + contentDiv.scrollHeight);
});
scrollHeight为438,但是这里文本内容的高度只占了418px:
所以这里的scrollHeight会把父盒子的padding内边距算进去,scrollWidth同理.