scrollTop、scrollLeft、scrollWidth、scrollHeight

54 阅读 0 评论 36 点赞

我是靠谱客的博主伶俐胡萝卜，最近开发中收集的这篇文章主要介绍scrollTop、scrollLeft、scrollWidth、scrollHeight，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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);
});