JS 56 scroll滚动条

一.scroll系列属性

    element.scrollTop   返回被卷去的上侧距离，无单位
    element.scrollLeft  返回被卷去的左侧距离，无单位
    element.scrollWidth 返回自身实际宽度，不含边框，无单位
    element.scrollHeight  返回自身实际高度，不含边框，无单位
    window.pageYOffset  返回整个页面被卷去的上侧距离
    window.pageXOffset 返回整个页面被卷去的左侧距离

二.onscroll事件

    滚动条发生滚动时可以触发的事件

三.代码示例

    window.onload=function(){
        var div=document.querySelector('div');
        console.log(div.scrollHeight);  //不含边框，当内容超出时，高度是超出宽度（实际内容高度）
        div.addEventListener('scroll',function(){
            console.log(div.scrollTop);  //拖动滚动条，返回被卷去的上侧距离                  
        })      
    }

四.实际案例

1.需求分析:
①.原先侧边栏是绝对定位
②.当页面滚动到一定位置(banner位置),侧边栏改为固定定位
③.页面继续滚动(main位置),会让返回顶部显示出来
④.点击返回顶部,有动画效果的返回顶部
2.案例分析:
①.需要用到滚动事件scroll,因为是页面滚动,所以事件源是document
②.滚动到某个位置,就是页面被卷上去的值
③.页面被卷去的头部为:window.pageYOffset, 若是被卷去左侧为:window.pageXOffset
④.页面滚动了多少,用window.pageYOffset ;页面上下滚动,用window.scroll(x,y)
3.代码

    <style>
        .slider-bar{
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            height: 130px;
            width: 45px;;
            background-color: red;
        }
        .w{
            width: 1200px;
            margin: 10px auto;
        }
        .header{
            height: 200px;
            background-color: pink;
        }
        .banner{
            height: 800px;
            background-color: blue;
        }
        .main{
            height: 1000px;
            background-color: yellowgreen;
        }
        span{         
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>

        window.onload=function(){
            var sliderbar=document.querySelector('.slider-bar');
            var goBack=document.querySelector('.goBack');
            var banner=document.querySelector('.banner');           
            var main=document.querySelector('.main');             
            //1.侧边栏需要的距离 = 侧边栏到顶部的距离 - banner到顶部的距离
            var sliderbarTop=sliderbar.offsetTop - banner.offsetTop;

            var bannerTop=banner.offsetTop;  //banner到页面顶端的值
            var mainTop = main.offsetTop; //main到页面顶端的值

            document.addEventListener('scroll',function(){
                //2..当被卷去的头部大于等于banner.offsetTop时,侧边栏改为固定定位
                if(window.pageYOffset >= bannerTop){
                    sliderbar.style.position='fixed';
                    sliderbar.style.top=sliderbarTop + 'px';  //同时更改sliderbar的top值
                }else{
                    sliderbar.style.position='absolute';  //此时绝对定位
                    sliderbar.style.top='';  //top恢复为初始值
                }
                //3.当被卷去的头部大于等于main.offsetTop时,显示返回顶部
                if(window.pageYOffset >= mainTop){
                    goBack.style.display='block';
                }else{
                    goBack.style.display='none';
                }
            })
           //4.点击返回顶部就让窗口滚动到页面最上方 
            goBack.addEventListener('click',function(){
                //window.scroll(0,0);  //4.1(无动画)里面的xy不加单位
                animate(window,0);            
            });
            /*
            4.2有动画的返回顶部
                现在页面滚动了多少,用window.pageYOffset
                使页面上下滚动,用window.scroll(x,y)
            */ 
            function animate(obj,target,callback){  //上下滚动动画函数
                clearInterval(obj.timer);  //调用时,先清除原先的定时器,在开启新的,防止不断点击按钮,,开启太多定时器,导致动画越来越快
                obj.timer = setInterval(function(){
                    var step =(target - obj.pageYOffset) / 20;  //每次走的距离
                    step= step > 0 ? Math.ceil(step) : Math.floor(step);  //正值往大取整 2.1~3,负值往小取整 -2.1~-3
                    
                    if(obj.pageYOffset == target){
                        clearInterval(obj.timer);  //停止定时器
                        if(callback){
                            callback();  //如果有回调函数,就在计时器停止时调用
                        }
                    }
                    //每次滚动的距离(目标值-现在的位置)/20                   
                    obj.scroll(0,obj.pageYOffset + step);
                },10);                
            }
 
        }

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
</body>