元素滚动 scroll系列

scroll 系列

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            /* 添加滚动条 */
            overflow: auto;
        }
    </style>

console.log(div.scrollHeight); //自身实际内容的高度，不含边框   319
        console.log(div.clientHeight); //220 盒子的高度 
        // scroll    滚动事件当我们滚动条发生变化会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop); //返回被卷去的上侧距离

案例：仿淘宝固定侧边栏

1.获取元素后

var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offsetTop 就是被卷去头部的大小  一定要写到滚动的外面
        var bannerTop = banner.offsetTop;
        // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;

2.页面滚动事件 scroll

document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset   页面被卷去的头部
            // 3.当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed'; //固定定位
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute'; //绝对定位
                sliderbar.style.top = '300px'; //改回原来的高度
            }
            // 4.当我们页面滚动到 main盒子，就显示 goBack模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })

三大系列总结：