WYŁĄCZ przewijanie w poziomie [zamknięte]

Ok, z jakiegoś powodu moja strona przewija się od lewej do prawej i pokazuje dużo brzydkiego miejsca.

Szukałem dla wyników, ale oni po prostu się pasek przewijania ukryte

Właśnie tego chcę, chcę fizycznie WYŁĄCZYĆ funkcję przewijania w poziomie. Nie chcę, aby użytkownik mógł przewijać od lewej do prawej strony na mojej stronie w górę iw dół!

Próbowałem: overflow-x:hiddenw css na moim htmltagu, ale ukrywał tylko pasek przewijania i nie wyłączał przewijania.

Proszę pomóż mi!

Oto link do strony: http://www.green-panda.com/usd309bands/ (uszkodzony link)

To może dać ci lepszy pogląd na to, o czym mówię:

To wtedy ładują się pierwsze strony:

A to po przewinięciu w prawo:

Spróbuj dodać to do swojego CSS

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

to paskudne dziecko twojego kodu :)

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

zastąp to

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

Aby to naprawić, zrobiłem to, co zrobili inni i użyłem css, aby ukryć poziomy pasek narzędzi:

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

Następnie w js utworzyłem detektor zdarzeń, aby wyszukać przewijanie, i przeciwdziałałem próbom przewijania w poziomie przez użytkowników.

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

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

Widziałem, jak ktoś zrobił coś podobnego, ale najwyraźniej to nie działało. To jednak działa dla mnie idealnie.

Wiem, że jest już za późno , ale w javascript istnieje podejście, które może pomóc wykryć, że element HTML powoduje przepełnienie w poziomie -> pasek przewijania

Oto link do posta na temat sztuczek CSS

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

może zwrócić coś takiego:

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

następnie wystarczy usunąć dodatkową szerokość z divlub ustawić jąmax-width:100%

Mam nadzieję że to pomoże!

Naprawiłem problem:]

Spróbuj tego, aby wyłączyć przewijanie szerokości tylko dla treści, a cały dokument jest tylko treścią body{overflow-x: hidden;}

koala_dev odpowiedział, że to zadziała:

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

MarkWPiper komentuje, że „: / Spowodowane przewijanie dotykiem / pędem, aby przestać działać na iPhonie”

Rozwiązaniem pozwalającym zachować dotyk / pęd na iPhonie jest dodanie tej linii wewnątrz bloku css dla html, body:

    height:auto!important;

Odpowiedź Koala_dev będzie działać, ale jeśli zastanawiasz się, oto powód, dla którego działa:

.
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.     

.

Jeśli chcesz wyłączyć przewijanie w poziomie na całej szerokości ekranu, użyj tego kodu.

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

Działa to lepiej niż „100%”, ponieważ ignoruje szerokość rodzica i zamiast tego używa rzutni.

Możesz wypróbować tę metodę na naszej stronie HTML.

1. sposób

body { overflow-x:hidden; }

Drugi sposób W tagu body CSS możesz użyć następujących elementów:

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

Spowoduje to usunięcie paska przewijania.

3. sposób

body { min-width: 1167px; }

5 sposób

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

6 sposób

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

4. sposób

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

Teraz szukam więcej… !!!!

Po prostu musiałem sobie z tym poradzić. W końcu uznałem tę metodę za najłatwiejszą i najbardziej przydatną. Poprostu dodaj

overflow-x: hidden;

Do twojego zewnętrznego rodzica. W moim przypadku wygląda to tak:

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

Musisz użyć, overflow-xponieważ jeśli używasz po prostu użyj overflow, wyłącz również przewijanie w pionie, a mianowicieoverflow-y

Jeśli przewijanie w pionie jest nadal wyłączone, możesz je wyraźnie włączyć:

overflow-y: scroll;

Wiem, że to trochę niewłaściwy sposób, ponieważ gdyby wszystko było dobrze skonfigurowane, nie trzeba by używać tej szybkiej i brudnej metody.

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

Zastosuj powyższy styl lub możesz utworzyć funkcję w javaScript, aby rozwiązać ten problem

Możesz zastąpić zdarzenie przewijania treści za pomocą JavaScript i zresetować przewijanie w poziomie do 0.

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;
});

Nie radzę tego robić, ponieważ ogranicza to funkcjonalność dla użytkowników z małymi ekranami.