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同理.
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
