如何使用jQuery 消除網頁的捲軸

這次帶給大家如何使用jQuery 消除網頁的滾動條，使用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(&#39;bottom&#39;,-Max_dist) ;
        scrollEle.bind(&#39;mousewheel&#39;,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(&#39;bottom&#39;)) ;
            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(&#39;bottom&#39;,tempPos) ;
        });
    }
    initScroll() ;

主要就是監聽滾輪事件，從而判斷滾輪的方向

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

這句是為了相容火狐，其他瀏覽器都是屬性名稱為wheelDelta，值表示為120向上，-120向下，火狐是屬性名稱為detail，值表示為3向下，-3向上

每次觸發滾輪事件都會取得子類別的位置，然後根據滾輪的方向調整目前位置，注意判斷邊界就好了

demo程式碼

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼給span標記樣式設定width屬性

html與xhtml和xml有什麼差別

iframe的子頁面如何操作父頁屏蔽頁面彈出層效果

#HTML中定義多個class屬性無效

怎麼用按鈕觸發實作背景色的閃爍

#

以上是如何使用jQuery 消除網頁的捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！