jq消除网页滚动条

2018-02-20 19:42:16来源:cnblogs.com作者:mask_天俊人点击

分享

网页有些时候需要能滚动的效果,但是不想要滚动条,我就遇到了这样的需求。自己用jq写了一个垂直滚动条。

纯css也可以实现

.box::-webkit-scrollbar{display:none}

但是edge和Firefox不兼容,自己想了一下只要监听滚轮事件,用jq写应该很简单,所以就自己写了一下。

原理:需要两个div,第一个就命名为box-wrap吧,它是一个外层的包裹,由于是垂直滚动,所以要固定高度,然后设置overflow:hidden,这样竖直方向超过高度的部分就会被隐藏

第二个div就是内容需要滚动的div,命名为box,采用绝对定位,在监听到鼠标滚轮事件后根据滚轮方向相对移动

css代码

            #box-wrap{                position: relative;                width: 100% ;                height: 500px ;                overflow: hidden;            }            #box{                position: absolute;                width: 100% ;                height: 1500px ;                background: linear-gradient(blue,white) ;            }

为了能演示效果,里面的盒子我写成了定高,并且让背景渐变,正常来讲可以高度auto让文字撑开就行了,样式的关键在于让父类relative之后再让子类absolute,这样子类就可以相对父类移动

js代码

    function initScroll(){        //js模拟垂直滚轮滑动        var scrollEle = $('#box') ;        var scrollWrap = $('#box-wrap') ;        var scrollSpd = 20 ;//滚轮滚动的速度        var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离        if(Max_dist<=0){            return ;        }        scrollEle.css('bottom',-Max_dist) ;        scrollEle.bind('mousewheel',function(event){            var step = scrollSpd ;            event.preventDefault() ;            event = event.originalEvent ;            //兼容firefox            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;            var tempPos = parseInt(scrollEle.css('bottom')) ;            console.log(tempPos) ;            if(event.delta>0){                if(tempPos>(-Max_dist)){                    tempPos-step>(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;                }            }else{                if(tempPos<0){                    tempPos+step<0? tempPos = tempPos+step : tempPos = 0 ;                }            }            //console.log(tempPos) ;            scrollEle.css('bottom',tempPos) ;        });    }    initScroll() ;

主要就是监听滚轮事件,从而判断滚轮的方向

event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;

这句是为了兼容火狐,其他浏览器都是属性名称为wheelDelta,值表示为120向上,-120向下,火狐是属性名称为detail,值表示为3向下,-3向上

每次触发滚轮事件都会获取子类的位置,然后根据滚轮的方向调整当前位置,注意判断一下边界就好了

demo代码

<html>    <head>        <style>            #box-wrap{                position: relative;                width: 100% ;                height: 500px ;                overflow: hidden;            }            #box{                position: absolute;                width: 100% ;                height: 1500px ;                background: linear-gradient(blue,white) ;            }        </style>        <script src="./jquery-1.11.3.min.js"></script>    </head>    <body>        <div id="box-wrap">            <div id="box"></div>        </div>    </body>    <script type="text/javascript">    function initScroll(){        //js模拟垂直滚轮滑动        var scrollEle = $('#box') ;        var scrollWrap = $('#box-wrap') ;        var scrollSpd = 20 ;//滚轮滚动的速度        var Max_dist = scrollEle.height()-scrollWrap.height() ;//两个组件底边之间的最大距离        if(Max_dist<=0){            return ;        }        scrollEle.css('bottom',-Max_dist) ;        scrollEle.bind('mousewheel',function(event){            var step = scrollSpd ;            event.preventDefault() ;            event = event.originalEvent ;            //兼容firefox            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;            var tempPos = parseInt(scrollEle.css('bottom')) ;            console.log(tempPos) ;            if(event.delta>0){                if(tempPos>(-Max_dist)){                    tempPos-step>(-Max_dist)? tempPos = tempPos-step : tempPos = -Max_dist ;                }            }else{                if(tempPos<0){                    tempPos+step<0? tempPos = tempPos+step : tempPos = 0 ;                }            }            //console.log(tempPos) ;            scrollEle.css('bottom',tempPos) ;        });    }    initScroll() ;    </script></html>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台