Deaktivieren Sie die horizontale Schriftrolle [geschlossen]

Ok, aus irgendeinem Grund scrollt meine Webseite von links nach rechts und zeigt viel hässlichen Platz.

Ich habe nach Ergebnissen gesucht, aber sie haben gerade die Bildlaufleiste versteckt

Das ist jetzt, was ich will, ich möchte die horizontale Bildlauffunktion physisch deaktivieren . Ich möchte nicht, dass der Benutzer auf meiner Seite von links nach rechts nur nach oben und unten scrollen kann!

Ich habe versucht: overflow-x:hiddenin CSS auf meinem htmlTag, aber es hat nur die Bildlaufleiste ausgeblendet und den Bildlauf nicht deaktiviert.

Bitte hilf mir!

Hier ist ein Link zur Seite: http://www.green-panda.com/usd309bands/ (Defekter Link)

Dies könnte Ihnen eine bessere Vorstellung davon geben, wovon ich spreche:

Dies ist, wenn die ersten Seiten geladen werden:

Und das ist, nachdem ich nach rechts gescrollt habe:

Versuchen Sie, dies Ihrem CSS hinzuzufügen

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Das ist das böse Kind deines Codes :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

Ersetzen Sie es durch

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Um dies richtig zu beheben, habe ich das getan, was andere hier getan haben, und CSS verwendet, um die horizontale Symbolleiste auszublenden:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Dann habe ich in js einen Ereignis-Listener erstellt, um nach Bildlauf zu suchen, und dem versuchten horizontalen Bildlauf des Benutzers entgegengewirkt.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

Ich habe gesehen, wie jemand etwas Ähnliches gemacht hat, aber anscheinend hat das nicht funktioniert. Dies funktioniert jedoch einwandfrei für mich.

Ich weiß, dass es zu spät ist , aber es gibt einen Ansatz in Javascript, mit dem Sie erkennen können, dass das HTML-Element den horizontalen Überlauf verursacht -> Bildlaufleiste

Hier ist ein Link zum Beitrag über CSS-Tricks

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

es könnte so etwas zurückgeben:

<div class="div-with-extra-width">...</div>

Dann entfernen Sie einfach die zusätzliche Breite von der divoder stellen sie einmax-width:100%

Hoffe das hilft!

Es hat das Problem für mich behoben:]

Versuchen Sie dies, um das Scrollen in der Breite nur für den Text zu deaktivieren. Das gesamte Dokument ist nur der Text body{overflow-x: hidden;}

koala_dev antwortete, dass dies funktionieren wird:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

Und MarkWPiper kommentiert: ": - / Touch- / Momentum-Scrolling verursacht, um die Arbeit am iPhone zu beenden."

Die Lösung, um Touch / Momentum auf dem iPhone zu erhalten, besteht darin, diese Zeile innerhalb des CSS-Blocks für HTML, Body, hinzuzufügen:

    height:auto!important;

Die Antwort von Koala_dev wird funktionieren, aber falls Sie sich fragen, ist dies der Grund, warum es funktioniert:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Verwenden Sie diesen Code, wenn Sie das horizontale Scrollen über die gesamte Bildschirmbreite deaktivieren möchten.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

Dies funktioniert besser als "100%", da die übergeordnete Breite ignoriert und stattdessen das Ansichtsfenster verwendet wird.

Sie können diese Methode auf unserer HTML-Seite ausprobieren.

1. Weg

body { overflow-x:hidden; }

2. Weg Sie können Folgendes in Ihrem CSS-Body-Tag verwenden:

overflow-y: scroll; overflow-x: hidden;

Dadurch wird Ihre Bildlaufleiste entfernt.

3. Weg

body { min-width: 1167px; }

5. Weg

html, body { max-width: 100%; overflow-x: hidden; }

6. Weg

element { max-width: 100vw; overflow-x: hidden; }

4. Weg ..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Jetzt bin ich auf der Suche nach mehr .. !!!!

Ich musste mich nur selbst darum kümmern. Immerhin fand ich diese Methode am einfachsten und nützlichsten. Einfach hinzufügen

overflow-x: hidden;

An deine äußeren Eltern. In meinem Fall sieht es so aus:

<body style="overflow-x: hidden;">

Sie müssen verwenden, overflow-xdenn wenn Sie einfach verwenden overflow, deaktivieren Sie auch das vertikale Scrollen, nämlichoverflow-y

Wenn das vertikale Scrollen immer noch deaktiviert ist, können Sie es explizit aktivieren mit:

overflow-y: scroll;

Ich weiß, dass es etwas nicht richtig ist, denn wenn alles gut eingerichtet wäre, müsste man diese schnelle und schmutzige Methode nicht anwenden.

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

Sie wenden den obigen Stil an oder können eine Funktion in JavaScript erstellen , um dieses Problem zu lösen

Sie können das Body-Scroll-Ereignis mit JavaScript überschreiben und den horizontalen Scroll auf 0 zurücksetzen.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

Ich rate davon ab, da dies die Funktionalität für Benutzer mit kleinen Bildschirmen einschränkt.