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

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

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

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

Я попытался: 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 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%

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

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

Попробуйте это, чтобы отключить прокрутку по ширине только для тела, весь документ просто является телом 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; }

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

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

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

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

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