Deaktivieren Sie das Scrollen am Körper

136

Ich möchte das Scrollen im HTML bodyvollständig deaktivieren . Ich habe folgende Optionen ausprobiert:

  • overflow: hidden; (funktioniert nicht, hat das Scrollen nicht deaktiviert, es hat nur die Bildlaufleiste ausgeblendet)

  • position: fixed; (Dies hat funktioniert, aber es wurde vollständig nach oben gescrollt, was für diese spezielle Anwendung nicht akzeptabel ist.)

Ich konnte keine Alternativen zu diesen beiden Optionen finden. Gibt es noch mehr?

html css scroll Micha Wiedenmann
quelle
3
Für welches Element haben Sie den Überlauf angewendet: versteckt?
Sajad Karuthedath
Was genau versuchst du hier zu erreichen? Was ist dein Endziel?
jbutler483
2
Das Anzeigen des relevanten Codes erleichtert Ihnen die Unterstützung.
Sleek Geek
1
Überlauf versteckt; ist der Weg zu gehen. Wenn es nicht funktioniert, haben Sie ein anderes Problem in Ihrem CSS. Versuchen Sie HTML, body {overflow: hidden;}, wenn dies nicht funktioniert, versuchen Sie * {overflow: hidden;} und versuchen Sie herauszufinden, was falsch ist
Jonas Grumann

Antworten:

244

Set heightund overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

Panther
quelle
3
2
Funktioniert nicht unter iOS, wenn Sie ein Overlay-Element mit fester Position haben.
notQ
1
Sie könnten einfach den "Überlauf" hinzufügen: "versteckt" und es wird gut funktionieren.
JPG
Diese Lösung hat bei mir nicht sofort funktioniert, aber nach der Inspektion wurde "Margin" irgendwo überschrieben. Festlegen des "Randes: 0" dieses Elements hat den Trick gemacht.
Joaoprib
19

HTML-CSS funktioniert einwandfrei, wenn das Body-Tag nichts tut, was Sie auch schreiben können

<body scroll="no" style="overflow: hidden">

In diesem Fall sollte das Überschreiben auf dem Body-Tag erfolgen. Es ist einfacher zu kontrollieren, verursacht jedoch manchmal Kopfschmerzen.

Lalo
quelle
21
Dies ist nicht gültig HTML5
mbomb007
@ mbomb007 Können Sie bitte den Fehler hier in Bezug auf HTML5 kommentieren?
Ethan
5
@Ethan Das scrollAttribut ist für das <body>Tag nicht gültig . Es ist in keiner Spezifikation, die ich finden kann, als gültig aufgeführt. w3schools ; MDN ; Quackit
mbomb007
14

Dieser Beitrag war hilfreich, wollte aber nur eine kleine Alternative vorstellen, die anderen helfen kann:

Einstellen max-heightstatt heightauch macht den Trick. In meinem Fall deaktiviere ich das Scrollen basierend auf einem Klassenwechsel. .someContainer {height: 100%; overflow: hidden;}Wenn Sie festlegen, wann die Höhe des Containers kleiner als die des Ansichtsfensters ist, wird der Container gedehnt, was nicht das ist, was Sie möchten. Das Festlegen max-heightberücksichtigt dies. Wenn jedoch die Höhe des Containers größer ist als die des Ansichtsfensters, wenn sich der Inhalt ändert, wird das Scrollen weiterhin deaktiviert.

Joebjoe
quelle
Dies ersparte mir den Tag für Desktop-Browser ohne unerwünschte Nebenwirkungen von Scroll-Top-Top. funktionierte aber nicht in mobilen Browsern (iphone5s und android).
Bob
5

Fügen Sie dazu dem <body>Element 2 CSS-Eigenschaften hinzu .

body {
   height: 100%;
   overflow-y: hidden;
}

Heutzutage gibt es viele Nachrichten-Websites, auf denen Benutzer ein Konto erstellen müssen. Normalerweise gewähren sie etwa eine Sekunde lang vollen Zugriff auf die Seite. Anschließend wird ein Popup angezeigt, und Benutzer können nicht mehr nach unten scrollen.

Der Telegraph

bvdb
quelle
Dadurch wird die Bildlaufleiste ausgeblendet. In der Frage wird jedoch speziell nach einer Alternative zum Ausblenden der Bildlaufleiste
gefragt
@DataGeek, dies verbirgt nicht nur die Bildlaufleiste, sondern verhindert auch das Scrollen nach unten. Und so wie ich es verstehe, wurde darum gebeten. dh nicht nur verstecken, sondern auch unmöglich machen, nach unten zu scrollen.
bvdb