webentwicklung-frage-antwort-db.com.de

Körper auf Überlauf-y eingestellt: ausgeblendet, aber die Seite ist in Chrome noch scrollbar

Ich habe ein Problem mit der overflow-y-Eigenschaft in Chrome. Obwohl ich hidden eingestellt habe, kann ich die Seite trotzdem mit dem Mausrad scrollen.

Hier ist mein 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>

Weiß jemand, wie man das vertikale Scrollen in Chrome blockiert?

Vielen Dank!

21

Ich habe endlich einen Weg gefunden, um das Problem zu beheben, also beantworte ich hier.

Ich habe stattdessen den overflow-y auf den #content gesetzt und meine Schritte in ein anderes div verpackt. Es klappt. 

Hier ist der endgültige Code:

<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

Wenn Sie eine Höhe von 100% an Ihrem Körper und an Ihrem HTML-Wert einstellen, sollten Sie dies beheben. Ohne eine definierte Höhe läuft Ihr Inhalt nicht über, so dass Sie nicht das gewünschte Verhalten erhalten.

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

Was funktioniert für mich unter/FF und/Chrome:

body {

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

}

overflow: hidden deaktiviert nur die Anzeige der Bildlaufleisten. (Aber Sie können es dort einfügen, wenn Sie möchten).

Es gibt einen Nachteil, den ich gefunden habe: Wenn Sie diese Methode auf einer Seite verwenden, auf der das Scrollen nur vorübergehend gestoppt werden soll, wird mit der Einstellung position: fixed nach oben gerollt 0/0.

Dies kann z. mit jQuery:

var lastTop;

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

function continueScrolling() {                    

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

Eine andere Lösung, die ich gefunden habe, besteht darin, einenMousewheel-Handler für den inneren Container festzulegen und sicherzustellen, dass er sich nicht weiterleitet, indem der letzte Parameter auf false gesetzt und die Ereignisblase gestoppt wird.

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

Bildlauf funktioniert im inneren Container einwandfrei, aber das Ereignis wird nicht in den Hauptteil übertragen und es wird kein Bildlauf durchgeführt. Dies ist zusätzlich zum Einstellen der Körpereigenschaften Überlauf: ausgeblendet und Höhe: 100% .

3
dareapersven

Benutzen:

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

Probieren Sie dies aus, wenn Sie die Bildlaufleiste Ihres Körpers "reparieren" möchten:

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

und dies, wenn Sie es wieder normal machen wollen:

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

Ok, das ist die Kombination, die für mich funktionierte, als ich dieses Problem auf einer meiner Websites hatte:

html {
    height: 100%;
}

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

Finden Sie das Element heraus, das größer ist als der Körper (Element, durch das die Seite gescrollt wird), und setzen Sie einfach die Position auf „Fest“. HINWEIS: Ich rede nicht dazu, die Position von ziehbaren Elementen zu ändern. Ziehbare Elemente können nur aus dem Hauptteil herausgezogen werden, wenn ein Element größer als der Hauptteil ist (meistens in der Breite).

0
Vikas Bidhuri