自己封裝的滾動條滾到底部和可視區域的外掛

weixin_30788239發表於2020-04-05
(function(window,undefined){
    var jsSrollArra=function(){};
    /*計算高度軸的寬度*/
    jjsSrollArra.prototype={
        getScrollBar:function(){
            var el=document.createElement("p"),
            styles={
                width:"100px",
                height:"100px",
                overflowY:"scroll"
            },i,scrollBarWidth;
            for(i in styles){
                el.style[i]=styles[i];
            };
            document.body.appendChild(el);
            var scrollBarWidth=el.offsetWidth-el.clientWidth;
            document.body.removeChild(el);
            return scrollBarWidth;
        },
        /*計算可視區域*/
        /*呼叫方法
            jsSrollArra.visibleArea({
                fatherId:fatherId//設定ID為在某個DIV的可視區域,設定為空或者不設定為在瀏覽器的可視區域
                divId:id,//需要在可視區域DIV的id
                visibleFunction:visibleFunction//在可視區域中執行的函式
            });
        **/
        visibleArea:function(params){
            var pot=params;
            if(pot.fatherId == "" || pot.fatherId == undefined){
                var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
            }else{
                var clients=document.getElementById(pot.fatherId).clientHeight;
            };
            if(typeof pot.divId == 'object'){
                var divTop=pot.divId.getBoundingClientRect().top;
            }else{
                var divTop=document.getElementById(pot.divId).getBoundingClientRect().top;
            };
            if(divTop<clients){
                pot.visibleFunction();
            }
       },
        /*判斷滾動條到底部或者頂部*/
        /*呼叫方法
            jsSrollArra.scrollHeight({
                divId:id,//設定id為某個Div滾動到底部,不設定或者為空為瀏覽器滾動條
                scrollTopFunction:scrollTopFunction//滾動到頂部執行的函式
                scrollBottomFunction:scrollBottomFunction//滾動到底部執行的函式
            });
        **/
        scrollHeight:function(params){
            var pot=params;
            if(pot.divId == "" || pot.divId == undefined){
                var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
                var scrollTop=document.body.scrollTop;
                var wholeHeight=document.body.scrollHeight;
            }else{
                var clients=document.getElementById(pot.divId).clientHeight;
                var scrollTop=document.getElementById(pot.divId).scrollTop;
                var wholeHeight=document.getElementById(pot.divId).scrollHeight;
            };
            if(clients+scrollTop>=wholeHeight){
                pot.scrollBottomFunction();
            }else if(scrollTop==0){
                pot.scrollTopFunction();
            }
        }
    }
    window.jsSrollArra=jsSrollArra;
})(window,undefined);
var jsSrollArra= new jsSrollArra();

 

轉載於:https://www.cnblogs.com/binmengxue/p/6402067.html

相關文章