ВИМКНЕННЯ горизонтального прокрутки [закрито]

Гаразд, моя веб-сторінка прокручується зліва направо і показує багато некрасивого місця.

Я шукав результати, але вони просто зробили смугу прокрутки приховано

Ось що я хочу, я хочу фізично відключити функцію горизонтальної прокрутки. Я не хочу, щоб користувач міг прокручувати ліворуч направо на своїй сторінці просто вгору та вниз!

Я спробував: overflow-x:hiddenу css на своєму htmlтезі, але це лише зробило смугу прокрутки та не відключило прокрутку.

Будь ласка, допоможи мені!

Ось посилання на сторінку: http://www.green-panda.com/usd309bands/ (Зламане посилання)

Це може дати вам краще уявлення про те, про що я говорю:

Це коли завантажуються перші сторінки:

І це після того, як я прокручую праворуч:

Спробуйте додати це до CSS

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

це гидка дитина вашого коду :)

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

замінити його на

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

Отже, щоб правильно виправити це, я зробив те, що робили тут інші, і використав css, щоб приховати горизонтальну панель інструментів:

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

Потім у js я створив слухача подій, щоб шукати прокрутку, і протидіяв користувачам, які намагалися горизонтально прокручувати.

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

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

Я бачив, як хтось робить щось подібне, але, мабуть, це не спрацювало. Це, однак, для мене працює чудово.

Я знаю, що вже пізно , але в JavaScript використовується підхід, який може допомогти вам виявити html-елемент відьми, що спричиняє горизонтальне переповнення -> смуга прокрутки

Ось посилання на публікацію про трюки CSS

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

це може повернути щось подібне:

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

тоді ви просто видаліть додаткову ширину з divабо встановіть їїmax-width:100%

Сподіваюся, це допомагає!

Це вирішило проблему для мене:]

Спробуйте це, щоб вимкнути прокручування ширини лише для тіла, весь документ просто є body body{overflow-x: hidden;}

koala_dev відповів, що це спрацює:

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

І MarkWPiper коментує, що ": - / спричинено натискання / імпульс прокрутки, щоб перестати працювати на iPhone"

Рішенням підтримувати зв'язок / імпульс на iPhone - додати цю лінію всередині блоку css для html, body:

    height:auto!important;

Відповідь Koala_dev спрацює, але якщо вам цікаво, це причина, чому вона працює:

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

.

Якщо ви хочете відключити горизонтальну прокрутку по всій ширині екрана, використовуйте цей код.

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

Це працює краще, ніж "100%", оскільки він ігнорує батьківську ширину і замість цього використовує область перегляду.

Ви можете спробувати цей метод на нашій html-сторінці.

1-й спосіб

body { overflow-x:hidden; }

Другий спосіб Ви можете використовувати наступне у своєму тезі CSS:

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

Це видалить вашу смугу прокрутки.

3-й спосіб

body { min-width: 1167px; }

5-й спосіб

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

6-й шлях

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

4-й спосіб ..

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

Зараз я шукаю про більше .. !!!!

Мені просто довелося з цим самому впоратися. Зрештою, я знайшов цей метод найпростішим і корисним. Просто додайте

overflow-x: hidden;

До вашого зовнішнього батька. У моєму випадку це виглядає приблизно так:

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

Ви повинні використовувати, overflow-xтому що якщо ви просто використовуєте, overflowви також відключаєте вертикальну прокрутку, а самеoverflow-y

Якщо вертикальна прокрутка все ще вимкнена, ви можете ввімкнути її прямо:

overflow-y: scroll;

Я знаю, що це дещо не належний спосіб, бо якби все було налаштовано добре, не потрібно було б використовувати цей швидкий і брудний метод.

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

Для вирішення цієї проблеми ви застосовуєте наведений вище стиль або можете створити функцію в javaScript

Ви можете змінити подію прокрутки тіла за допомогою JavaScript і скинути горизонтальну прокрутку до 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;
});

Я не раджу це робити, оскільки це обмежує функціональність для користувачів з малими екранами.