web-dev-qa-db-fra.com

Corps défini sur débordement-y: masqué mais la page peut toujours défiler dans Chrome

J'ai un problème avec la propriété overflow-y dans Chrome. Même si je l'ai réglé sur hidden, je peux toujours faire défiler la page avec la molette de la souris.

Voici mon code:

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}
<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>

Quelqu'un sait-il comment bloquer le défilement vertical dans Chrome?

Merci!

cssgoogle-chromescrollscrollbaroverflow
21
Cécile Boucheron

J'ai enfin trouvé un moyen de résoudre le problème, alors je réponds ici.

J'ai mis le overflow-y sur le #content à la place, et j'ai emballé mes pas dans un autre div. Ça marche. 

Voici le code final:

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}
17
Cécile Boucheron

Définir une hauteur sur votre corps et html de 100% devrait vous arranger. Sans une hauteur définie, votre contenu ne déborde pas et vous n'obtiendrez pas le comportement souhaité.

html, body {
  overflow-y:hidden;
  height:100%;
}
34
RhinoWalrus

Ce qui fonctionne pour moi sur/FF et/Chrome:

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hidden désactive simplement l'affichage des barres de défilement. (Mais vous pouvez le mettre là si vous voulez).

J'ai trouvé un inconvénient: si vous utilisez cette méthode sur une page pour laquelle vous souhaitez que le défilement ne soit temporairement interrompu, définissez position: fixed pour le faire défiler vers le haut . 0/0.

Cela peut être réparé, par exemple. avec jQuery:

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}
11
Scheintod

Une autre solution que j'ai trouvée est de définir un gestionnaire mousewheel sur le conteneur interne et de vous assurer qu'il ne se propage pas en définissant son dernier paramètre sur false et en arrêtant la bulle d'événements.

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

Scroll fonctionne bien dans le conteneur interne, mais l'événement ne se propage pas au corps et ne défile donc pas. Cela s'ajoute à la définition des propriétés du corps overflow: hidden et height: 100% .

3
dareapersven

Utilisation:

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
1
Gagan

Essayez ceci quand vous voulez "réparer" le rouleau de votre corps:

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

et ceci quand vous voulez redevenir normal:

jQuery('body').css('height', '').css('overflow-y', '');
0
Maxi

Ok, c’est donc la combinaison qui a fonctionné pour moi lorsque j’ai eu ce problème sur l’un de mes sites Web:

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}
0
Milan Meuleman

Recherchez l'élément qui est plus grand que le corps (élément qui fait défiler la page) et définissez simplement sa position sur fixed . Les éléments déplaçables ne peuvent être déplacés du corps que s'il existe un élément plus grand que le corps (la plupart du temps en largeur).

0
Vikas Bidhuri