明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何使用jQuery 消除頁面的滾動條

發(fā)表時(shí)間：2024-05-01 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)砣绾问褂胘Query 消除網(wǎng)頁的滾動條，使用jQuery 消除網(wǎng)頁的滾動條的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。網(wǎng)頁有些時(shí)候需要能滾動的效果，但是不想要滾動條，我就遇到了這樣的需求。自己用jq寫了一個(gè)垂直滾動條。純css也可以實(shí)現(xiàn).box::-webkit-scrollb...
這次給大家?guī)砣绾问褂胘Query 消除網(wǎng)頁的滾動條，使用jQuery 消除網(wǎng)頁的滾動條的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

網(wǎng)頁有些時(shí)候需要能滾動的效果，但是不想要滾動條，我就遇到了這樣的需求。自己用jq寫了一個(gè)垂直滾動條。

純css也可以實(shí)現(xiàn)

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

但是edge和Firefox不兼容，自己想了一下只要監(jiān)聽滾輪事件，用jq寫應(yīng)該很簡單，所以就自己寫了一下。

原理：需要兩個(gè)div，第一個(gè)就命名為box-wrap吧，它是一個(gè)外層的包裹，由于是垂直滾動，所以要固定高度，然后設(shè)置overflow:hidden，這樣豎直方向超過高度的部分就會被隱藏

第二個(gè)div就是內(nèi)容需要滾動的div，命名為box，采用絕對定位，在監(jiān)聽到鼠標(biāo)滾輪事件后根據(jù)滾輪方向相對移動

css代碼

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

為了能演示效果，里面的盒子我寫成了定高，并且讓背景漸變，正常來講可以高度auto讓文字撐開就行了，樣式的關(guān)鍵在于讓父類relative之后再讓子類absolute，這樣子類就可以相對父類移動

js代碼

function initScroll(){
        //js模擬垂直滾輪滑動
        var scrollEle = $('#box') ;
        var scrollWrap = $('#box-wrap') ;
        var scrollSpd = 20 ;//滾輪滾動的速度
        var Max_dist = scrollEle.height()-scrollWrap.height() ;//兩個(gè)組件底邊之間的最大距離
        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() ;

主要就是監(jiān)聽滾輪事件，從而判斷滾輪的方向

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

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

每次觸發(fā)滾輪事件都會獲取子類的位置，然后根據(jù)滾輪的方向調(diào)整當(dāng)前位置，注意判斷一下邊界就好了

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() ;//兩個(gè)組件底邊之間的最大距離
        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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎么給span標(biāo)記樣式設(shè)置width屬性

html與xhtml和xml有什么區(qū)別

iframe的子頁面怎樣操作父頁屏蔽頁面彈出層效果

HTML中定義多個(gè)class屬性無效

怎樣用按鈕觸發(fā)實(shí)現(xiàn)背景色的閃爍

以上就是如何使用jQuery 消除網(wǎng)頁的滾動條的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。