Ist es möglich, nur horizontales Scrollen zu verhindern, wenn Overflow-X ausgeblendet ist?

Ich habe eine Webseite mit Inhalten, die über den rechten Rand des Browserfensters hinausreichen. Ich setze overflow-x: hidden auf <body>, um die untere Bildlaufleiste auszuschalten, aber ich kann immer noch horizontal mit dem Trackpad scrollen, was ich nicht will.Ist es möglich, nur horizontales Scrollen zu verhindern, wenn Overflow-X ausgeblendet ist?

Gibt es eine Möglichkeit zu verhindern, dass der Browser horizontal scrollt? Als Randnotiz: Safari 4.0.4 scrollt nur manchmal horizontal, und das Scrollen fühlt sich "klebrig" und "nervös" an, während Firefox immer sanft horizontal scrollt.

Quelle

2010-04-15 Andrew LeClair

Sie könnten versuchen, in CSS zu setzen:

html{ 
    overflow-x: hidden; 
}

statt Verwendung body Wähler. Ich habe das versucht und arbeitet in Firefox.

Quelle

2010-04-15 20:12:17

Ich habe das auch in FF versucht, und es scheint genau dasselbe Problem zu haben. Die bessere Lösung wäre, wie @Chaulky bemerkte, einfach die Anzeige auf "none" zu setzen. Wenn Sie möchten, dass dies angezeigt wird, führen Sie einige js/jquery aus, um es erneut zu verschieben. – Automatico

Wenn alles andere fehlschlägt, können Sie Javascript verwenden, um den Browser ständig dazu zu zwingen, mit window.scrollTo (xpos, ypos) nach links zu scrollen. Für xpos möchten Sie 0 und ypos verwenden, um die aktuelle Bildlaufposition des Benutzers zu erhalten, vorausgesetzt, Sie möchten vertikales Scrollen zulassen.

Sie können Ihren Funktionsaufruf entweder im window.onscroll-Ereignishandler oder in einem JavaScript-Intervall, das alle 100 ms oder so ausgeführt wird, setzen. Wie du willst. Wenn Sie Code-Beispiele benötigen, fragen Sie einfach.

Quelle

2010-04-16 17:13:50 InvisibleBacon

Um das Scrollen zu verhindern, könnte man eine Kombination aus 'overflow: hidden',' window.onscroll' und 'window.scrollTo' verwenden, um die Bildlaufleisten auszublenden und den Benutzer auf 0,0 zu richten (oben links von der Bildschirm) beim Scrollen, wobei die Webseite effektiv an ihrer aktuellen Position gehalten wird (oder ypos als aktuelle Scroll-Position des Benutzers, um das vertikale Scrollen beizubehalten, wie es @InvisibleBacon vorgeschlagen hat) – Seagrass

Das wäre besser zu verstehen, wenn Sie ein Beispiel hätten.

ist dies eine lange URL oder etwas ohne Leerzeichen? Hast du white-space:nowrap; auf das Element gesetzt?

Wenn Sie einen Container mit einer definierten Größe (eine, die im Ansichtsfenster passt) haben, sollte der Text haften richtig, (es sei denn, es ohne Leerzeichen eine lange Schlange ist)

Quelle

2010-04-17 05:17:49

Ich denke, die Frage ist, warum Haben Sie Ihren Inhalt über die vorgesehene Größe der Seite hinaus? Ist dieser Inhalt, den Benutzer nicht sehen sollen? In diesem Fall lege es irgendwo in ein Div und setze es auf keinen. Das würde das Überlaufproblem vollständig vermeiden.

Wenn es einen legitimen Grund gibt, dass der Container überlaufen soll, legen Sie die Größe des Containers explizit fest, und setzen Sie dann den Überlauf-x auf Versteckt. Ich habe es nicht getestet, aber das sollte das aktuelle Verhalten verhindern. Wenn nicht, versuchen Sie es mit einem div und nicht mit dem body-Tag. Die Browser verhalten sich möglicherweise seltsam, weil sie am Body-Tag selbst arbeiten.

Quelle

2010-04-17 16:09:44 Chaulky

Ich würde in Chrome gehen und die Entwickler-Tools auf einem Desktop öffnen. Entfernen Sie die Eigenschaft overflow-x. Fahren Sie dann fort, um jedes übergeordnete Element auf Ihrer Seite zu löschen. Wenn Sie sehen, dass die horizontale Bildlaufleiste verschwindet, wissen Sie, dass Sie Ihr Problem gefunden haben. Dann tauche in dieses Element ein. Ich wette, Sie haben eine Breite von 100% und dann eine Marge. Entfernen Sie den Rand, wenn dies der Fall ist.

Quelle

2013-05-10 16:16:56

Alte Diskussion, aber es könnte für Leute nützlich sein, die nach der richtigen Antwort suchen!

Setzen Sie "overflow: hidden" auf das übergeordnete div des Elements, das breiter ist als das Browserfenster (nicht html oder body, wie Sie es normalerweise tun würden), das den scroll mit de pad oder den Pfeiltasten stoppt.

Quelle

2013-06-01 23:26:04 Clauce

Ist es möglich, nur horizontales Scrollen zu verhindern, wenn Overflow-X ausgeblendet ist?

Antwort

Verwandte Themen