jq消除网页滚动条

网页有些时候须要能滚动的效果，可是不想要滚动条，我就遇到了这样的需求。本身用jq写了一个垂直滚动条。javascript

纯css也能够实现css

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

可是edge和Firefox不兼容，本身想了一下只要监听滚轮事件，用jq写应该很简单，因此就本身写了一下。html

原理：须要两个div，第一个就命名为box-wrap吧，它是一个外层的包裹，因为是垂直滚动，因此要固定高度，而后设置overflow:hidden，这样竖直方向超太高度的部分就会被隐藏java

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

css代码web

 #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代码ide

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() ;

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

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

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

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

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>

View Code