jQueryを使ってWebページのスクロールバーを消す方法

今回はjQueryを使ってWebページのスクロールバーを消す方法を紹介します。 jQueryを使ってWebページのスクロールバーを消す場合の注意点とは何ですか。実際の事例を見てみましょう。 。

Web ページはスクロールできる必要がある場合がありますが、スクロール バーは必要ありません。 jqを使って垂直スクロールバーを書きました。

純粋なcssも実装可能

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

ただし、edgeはFirefoxと互換性がないので、wheelイベントを監視するだけならjqで書くのが簡単かと思い、自分で書きました。

原則: 2 つの div が必要です。最初の div に box-wrap という名前を付けます。これは垂直方向にスクロールするため、高さを固定し、垂直方向になるように

overflow:hidden を設定する必要があります。高さを超えるものは非表示になります

2 番目の div は、コンテンツをスクロールする必要がある div であり、ボックスという名前が付けられており、マウスホイールイベントをリッスンした後、ホイールの方向に従って相対的に移動します

。 CSSコード

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

効果を示すために、内側のボックスを固定の高さにして背景のグラデーションを設定しました。通常は、テキストを拡張するために高さを自動にすることができます。親クラスを相対化し、サブクラスを絶対にすることで、サブクラスが親クラスに対して相対的に移動できるようになります

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;

この文はFirefoxとの互換性のため、他のブラウザではwheelDeltaという属性名があり、値は下方向に-120で表現されますが、Firefoxの属性名は下方向に3、上方向に-3と表現されます

スクロール ホイール イベントがトリガーされ、サブクラスの位置が取得され、スクロール ホイールの方向に応じて現在の位置が調整されます。OK

デモ コード

だと思います。これらの事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

spanタグスタイルのwidth属性を設定する方法

htmlとxhtml、xmlの違いは何ですか

ページポップをブロックするために親ページを操作する方法iframe の子ページの -up レイヤー効果

HTML での複数のクラス属性の定義は無効です

ボタントリガーを使用して背景色の点滅を実現する方法

以上がjQueryを使ってWebページのスクロールバーを消す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。