如何运用jQuery 消除页面的滚动条

网页有些时候需要能滚动的效果，但是不想要滚动条，我就遇到了这样的需求。自己用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 

关键词：如何运用jQuery 消除页面的滚动条