So verwenden Sie jQuery, um Bildlaufleisten auf Webseiten zu entfernen

Dieses Mal zeige ich Ihnen, wie Sie mit jQuery die Bildlaufleiste einer Webseite entfernen. Was sind die Vorsichtsmaßnahmen für die Verwendung von jQuery, um die Bildlaufleiste einer Webseite zu entfernen? Fall, werfen wir einen Blick darauf.

Manchmal müssen Webseiten scrollen können, aber sie benötigen keine Bildlaufleisten. Ich bin auf ein solches Bedürfnis gestoßen. Ich habe mit jq eine vertikale Bildlaufleiste geschrieben.

Reines CSS kann auch implementiert werden

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

Edge ist jedoch nicht mit Firefox kompatibel. Ich dachte, dass es sehr einfach wäre, es mit jq zu schreiben, solange es das Wheel-Ereignis überwacht , also habe ich es selbst geschrieben.

Prinzip: Sie benötigen zwei Divs: ausgeblendet, so dass der Teil, der die Höhe in vertikaler Richtung überschreitet, ausgeblendet wird Das zweite Div ist das Div, dessen Inhalt gescrollt werden muss, genannt Box, mit

absoluter Positionierung

, danach Überwachung Nach dem Mausrad-Ereignis basiert die relative Bewegung auf der Richtung des RadesCSS-Code

Um den Effekt zu demonstrieren, habe ich das Feld darin geschrieben, um ein zu haben Feste Höhe und lassen Sie den Hintergrundgradienten. Normalerweise wird der Text nur erweitert. Der Schlüssel zum Stil besteht darin, die übergeordnete Klasse relativ und dann die Unterklasse absolut zu machen, sodass sich die Unterklasse relativ zur übergeordneten Klasse bewegen kann 🎜>

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

JS-Code

Main Es dient zum Abhören des Radereignisses, um die Richtung des Rades zu bestimmen

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

Dieser Satz dient der Kompatibilität mit Firefox Andere Browser haben den Attributnamen WheelDelta und der Wert wird als 120 nach oben und -120 nach unten ausgedrückt. Firefox ist das Attribut Der Name ist Detail und der Wert wird als 3 nach unten und -3 nach oben ausgedrückt

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

Jedes Mal Wenn das Radereignis ausgelöst wird, wird die Position der Unterklasse ermittelt und dann die aktuelle Position entsprechend der Richtung des Rads angepasst. Achten Sie einfach darauf, die Grenze zu beurteilen

Democode

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So legen Sie das Breitenattribut für den Span-Tag-Stil fest

Was ist der Unterschied zwischen HTML, xhtml und xml

So bedienen Sie die Unterseite von Iframe, um den Popup-Ebeneneffekt der übergeordneten Seite zu blockieren

Das Definieren mehrerer Klassenattribute in HTML ist ungültig

So verwenden Sie den Schaltflächenauslöser, um das Blinken der Hintergrundfarbe zu erreichen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um Bildlaufleisten auf Webseiten zu entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!