效果图

结构

    <div>
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
       我是内容
   </div>

CSS

        * {
    
    
            margin: 0;
            padding: 0;
        }

        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }

js

        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll 滚动事件 当我们过滚动条发生变化会触发的事件
        div.addEventListener('scroll', function ()
        {
    
    
            console.log(div.scrollTop);
        })