ОТКЛЮЧИТЬ горизонтальную прокрутку

Хорошо, почему-то моя веб-страница прокручивается слева направо и показывает много уродливого пространства.

Я искал результаты, но они просто сделали полосу прокрутки HIDDEN

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

Я пробовал: overflow-x:hidden в css на моем теге html, но он только скрыл полосу прокрутки и не отключил прокрутку.

Пожалуйста, помогите мне!

Вот ссылка на страницу: http://www.green-panda.com/usd309bands/ (Неработающая ссылка)

Это может дать вам лучшее представление о том, о чем я говорю:

Это когда загружаются первые страницы:

enter image description here

И это после прокрутки вправо:

enter image description here

ОТВЕТЫ

Ответ 1

Попробуйте добавить это в свой CSS

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

Ответ 2

это неприятный ребенок вашего кода:)

.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%;
}

Ответ 3

Итак, чтобы исправить это правильно, я сделал то, что здесь делали другие, и использовал css, чтобы скрыть горизонтальную панель инструментов:

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

Затем в js я создал прослушиватель событий для поиска прокрутки и противодействовал попыткам горизонтальной прокрутки пользователей.

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

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

Я видел, как кто-то делал что-то подобное, но, видимо, это не сработало. Это, однако, прекрасно работает для меня.

Ответ 4

Попробуйте это, чтобы отключить ширину прокрутки только для тела весь документ просто является телом body{overflow-x: hidden;}

Ответ 5

Я знаю это слишком поздно, но в javascript есть подход, который может помочь вам обнаружить, что HTML-элемент ведьмы вызывает горизонтальное переполнение → полоса прокрутки

Вот ссылка на пост на CSS Tricks

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%

Надеюсь это поможет!

Это исправило проблему для меня:]

Ответ 6

koala_dev ответил, что это будет работать:

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

И MarkWPiper комментирует, что ": -/Вызвал прокрутку касания/импульса, чтобы перестать работать на iPhone"

Решение сохранить связь/импульс на iPhone состоит в том, чтобы добавить эту строку внутри блока css для html, body:

    height:auto!important;

Ответ 7

Если вы хотите отключить горизонтальную прокрутку по всей ширине экрана, используйте этот код.

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

Ответ 8

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

Я не советую делать это, потому что это ограничивает функциональность для пользователей с маленькими экранами.

Ответ 9

Ответ 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.

,

Ответ 10

Я просто должен был разобраться с этим сам. В конце концов я нашел этот метод наиболее простым и полезным. Просто добавь

overflow-x: hidden;

Для вашего внешнего родителя. В моем случае это выглядит так:

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

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

Если вертикальная прокрутка все еще отключена, вы можете включить ее явно с помощью:

overflow-y: scroll;

Я знаю, что это не совсем правильно, потому что, если бы все было хорошо настроено, не пришлось бы использовать этот быстрый и грязный метод.

Ответ 11

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

Вы применяете вышеуказанный стиль или можете создать функцию в javaScript для решения этой проблемы.

Ответ 12

Вы можете попробовать все эти методы на нашей html странице.

1-й путь

body { overflow-x:hidden; }

2-й способ Вы можете использовать следующее в своем теге тела 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); } } );

Теперь я ищу больше.. !!!!