Comment utiliser jQuery pour éliminer les barres de défilement sur les pages Web

Cette fois, je vais vous montrer comment utiliser jQuery pour éliminer la barre de défilement d'une page Web. Quelles sont les précautions pour utiliser jQuery pour éliminer la barre de défilement d'une page Web. cas, jetons un coup d'oeil.

Parfois, les pages Web doivent pouvoir défiler, mais elles ne veulent pas de barres de défilement. J'ai rencontré un tel besoin. J'ai écrit une barre de défilement verticale en utilisant jq.

Le CSS pur peut également être implémenté

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

Mais Edge n'est pas compatible avec Firefox, j'ai pensé qu'il serait facile de l'écrire avec jq tant qu'il surveille l'événement wheel, donc. Je l'ai écrit moi-même.

Principe : vous avez besoin de deux div. Nommons le premier box-wrap. Puisqu'il défile verticalement, la hauteur doit être fixée, puis définie le débordement : caché, de sorte que la partie qui dépasse la hauteur dans le sens vertical soit cachée

Le deuxième div est le div dont le contenu doit défiler, nommé box, en utilisant le

positionnement absolu, après surveillance Après l'événement de la molette de la souris, le mouvement relatif est basé sur la direction de la roue

code css

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

Afin de démontrer l'effet, j'ai écrit la boîte à l'intérieur pour avoir un hauteur fixe et laisser le dégradé d'arrière-plan. Normalement, la hauteur peut être Auto, ce qui fait simplement agrandir le texte. La clé du style est de rendre la classe parent relative, puis de rendre la sous-classe absolue, afin que la sous-classe puisse se déplacer par rapport à la classe parent.

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

Principal Il s'agit d'écouter l'événement de la roue pour déterminer la direction de la roue

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

Cette phrase est destinée à la compatibilité avec Firefox. D'autres navigateurs ont le nom d'attribut wheelDelta, et la valeur est exprimée comme 120 vers le haut, -120 vers le bas, Firefox est l'attribut Le nom est détail, et la valeur est exprimée comme 3 vers le bas, -3 vers le haut

À chaque fois l'événement de roue est déclenché, la position de la sous-classe sera obtenue, puis la position actuelle sera ajustée en fonction de la direction de la roue. Faites juste attention à juger la limite

code démo

<.>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment définir l'attribut width pour le style de balise span

Quelle est la différence entre html, xhtml et xml

Comment faire fonctionner la sous-page d'iframe pour bloquer l'effet de calque pop-up de la page parent

La définition de plusieurs attributs de classe en HTML n'est pas valide

Comment utiliser le déclencheur de bouton pour obtenir le clignotement de la couleur d'arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!