Le corps mis à overflow-y:hidden, mais la page est toujours en défilant dans Chrome

Je vais avoir un problème avec le overflow-y propriété dans google Chrome.
Même si je l'ai fixé à hidden, je peux encore faire défiler la page avec la molette de la souris.

Voici mon code:

CSS:

html,
body {
  overflow-y: hidden;
}

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

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}

HTML:

<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 comment bloquer le défilement vertical dans Chrome?

Merci!

  • Veux juste les lien de ce post qui est lié et fournir des réponses pour les personnes toujours à la recherche de ça : link.
InformationsquelleAutor Cécile Boucheron | 2013-10-07
  1. 35

    Réglage de la hauteur sur votre corps et votre html de 100% devrait vous arranger. Sans une hauteur de votre contenu ne déborde pas, de sorte que vous ne sera pas obtenir le comportement souhaité.

    html, body {
  overflow-y:hidden;
  height:100%;
}
    • Merci, mais cela ne résout pas le problème :/
    • Le problème se produit lors de l'utilisation d'un Mac magic mouse.
    • Il peut être plus facile d'obtenir une réponse utile si vous déposez un exemple dans un jsfiddle et de fournir un lien: (jsfiddle.net). À partir de la condition extrait de c'est un peu un jeu de devinettes à ce qui pourrait le réparer.
    • Merci mais jsFiddle ne montre pas tout et le défilement a été désactivé avec mon code. Le problème se produit dans la fenêtre du navigateur, Chrome seulement, et avec le Mac magic mouse.
    • Ce qu'il est corrigé pour moi
    • Cela fonctionne sur iPhone. Il est un peu fragile sur le paysage si Safaris barre d'outils s'affiche, la réduction de la largeur intérieure de la page.

    InformationsquelleAutor RhinoWalrus
  2. 17

    J'ai enfin trouvé un moyen de résoudre le problème donc je vais répondre ici.

    J'ai mis le overflow-y sur le #content au lieu de cela, et enveloppé dans une autre div. Elle fonctionne.

    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;
}
    • pourrait m'aider à l'exact opposé, comment faire un défilement désactivé, la page de défilement sur latimes.com/sports/soccer/... 1er retirez le capot: #reg-overlay{background-color:none!important}
    InformationsquelleAutor Cécile Boucheron
  3. 12

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

    body {

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

}

    overflow: hidden juste désactive l'affichage des barres de défilement. (Mais vous pouvez le mettre là-bas, si vous aimez).

    Il ya un inconvénient que j'ai trouvé: Si vous utilisez cette méthode sur une page qui vous voulez seulement temporairement pour arrêter le défilement, réglage de la position: fixed de défilement vers le haut.
    C'est parce que la position: fixed utilise les positions absolues qui sont actuellement fixé à 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 );       
}
    • C'est une bonne solution, mais peut être rompu si vous modifiez un iPhone en mode paysage, et que le navigateur de la barre des tâches apparaît.
    • Cela devrait être la plus acceptée de répondre. Avec quelques ajustements, cela résout tous les problèmes, sauf que @Paddy parle ici, mais les chances sont si petits c'est la solution la plus propre. Celui qui suit ce, n'oubliez pas d'ajouter une classe appelée noscroll avec position fixe & la largeur et la hauteur à 100%.
    InformationsquelleAutor Scheintod
  4. 3

    Une autre solution que j'ai trouvée pour le travail consiste à définir un de la molette de la de gestionnaire à l'intérieur du conteneur et assurez-vous de ne pas se propager par le réglage de son dernier paramètre à false et l'arrêt de l'événement de la bulle.

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

    De défilement fonctionne bien à l'intérieur du conteneur, mais l'événement ne se propagent pas au corps, et donc elle ne se défile pas. C'est en plus de définir les propriétés du corps overflow:hidden et hauteur:100%.

    • Pas besoin de cette fonction une fois que vous avez ces propriétés définies sur le corps.
    InformationsquelleAutor dareapersven
  5. 1

    Essayez-le lorsque vous voulez pour "fixer" votre corps de défilement:

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

    et c'est quand vous voulez l'activer de nouveau normal:

    jQuery('body').css('height', '').css('overflow-y', '');
    • enfin une réponse qui fonctionne réellement lorsqu'il est appliqué
    InformationsquelleAutor Maxi
  6. 1

    Utilisation:

    overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
    InformationsquelleAutor Gagan
  7. 0

    Trouver l'élément qui est plus grand que le corps (élément qui est à l'origine de la page pour faire défiler) et juste régler la position fixe.
    NOTE: je ne parle pas de changer la position des éléments déplaçables. Déplaçable éléments peuvent être déplacés hors du corps seulement quand il y a un élément plus grand que le corps (surtout en largeur).

    InformationsquelleAutor Vikas Bidhuri
  8. 0

    Ok, donc c'est la combinaison qui a fonctionné pour moi quand j'ai eu ce problème sur un de mes sites web:

    html {
    height: 100%;
}

body {
    overflow-x: hidden;
}
    InformationsquelleAutor Milan Meuleman
  9. -2

    Techniquement, la taille de votre body et html sont plus large que l'écran, de sorte que vous aurez de défilement. Vous aurez besoin de mettre margin:0; et padding:0; pour éviter le comportement de défilement, et ajouter un peu de marge/rembourrage pour #content à la place.

    • Salut Jean, merci pour votre réponse. Pas sûr d'obtenir ce que vous voulez dire. Tu veux dire que je devrait mettre margin/padding:0; sur le html et le corps?
    • Juste ajouter du code html, body { margin:0; padding:0; overflow-y:hidden; }
    • Malheureusement, cela ne fonctionne pas et que je peux encore faire défiler la page.
    • Vous devrez peut-être ajouter box-sizing:border-box; à #content
    • Ne fonctionne pas, soit. La Page est encore de défilement.
    • Attendez, vous êtes confronté à défilement vertical? jsfiddle.net/9esqC il Semble ne pas défiler, même sans le box-sizing:border-box;
    • Eh bien, dans le Violon, il semble bon, mais pas dans ma fenêtre de navigateur. Si vous essayez d'écrire le code ci-dessus dans un nouveau fichier et l'ouvrir avec google Chrome, il va se défiler.
    • Ok, je vois ce que tu veux dire... Sa réelle en cliquant sur la roue qui permet de faire défiler... Pour les désactiver, vous devez utiliser certains jQuery. JsFiddle Grâce à source
    • J'utilise un Mac magic mouse. Pas la roue de la souris.
    • Ok, donc vous pourriez avoir besoin de faire plus de recherche sur la façon de désactiver cette fonction via javascript/jquery. Avec une vraie souris, il ne serait pas défiler, à moins que j'ai cliqué sur le volant et déplacé la souris vers le haut/vers le bas pour avoir un comportement défilement. Avec javascript, j'ai ajouté, ce qui est bloqué. Je ne suis pas sûr de savoir comment il serait fait pour le Mac magic mouse, malheureusement.
    • Vous pouvez probablement essayer cette solution

    InformationsquelleAutor Giovanni Silveira
  10. -3

    La bonne réponse est, vous avez besoin de mettre JUSTE le corps de overflow:hidden. Pour quelque raison que ce soit, si vous aussi vous définir html pour overflow:hidden, le résultat est le problème que vous avez décrit.

    InformationsquelleAutor David