• 自己封装的滚动条滚到底部和可视区域的插件


    (function(window,undefined){
        var jsSrollArra=function(){};
        /*计算高度轴的宽度*/
        jjsSrollArra.prototype={
            getScrollBar:function(){
                var el=document.createElement("p"),
                styles={
                    "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();
  • 相关阅读:
    简单后台登录逻辑实现Controller
    自学semantic UI个人博客首页模板
    Spring Boot日志处理
    Thymeleaf静态资源引入方式及公共页面代码抽取
    一个简单SpringBoot应用的pom.xml文件
    Spring Boot入门程序
    easyuUI实现客户分页显示逻辑分析
    easyui自学模板代码
    网络协议-webService协议
    【转】彻底搞透Netty框架
  • 原文地址:https://www.cnblogs.com/binmengxue/p/6402067.html
Copyright © 2020-2023  润新知