Отключить горизонтальную прокрутку

Question

Отключить горизонтальную прокрутку

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

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

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

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

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

~~вот ссылка на страницу:http://www.green-panda.com/usd309bands/~~ (сломанная ссылка)

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

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

enter image description here

и это после того, как я прокрутите вправо:

enter image description here

488 11

html css

11 ответов:

Comments

Ничего не найдено.

koala_dev · Accepted Answer · 2013-07-20 01:53:45

попробуйте добавить это в свой CSS
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Abdul Malik · Accepted Answer · 2013-07-20 01:55:44

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

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

Dylan Cope · Accepted Answer · 2015-08-30 02:54:40

поэтому, чтобы исправить это правильно, я сделал то, что делали другие здесь, и использовал css, чтобы скрыть горизонтальную панель инструментов:
.name {
  max-width: 100%;
  overflow-x: hidden;
}
затем в js я создал прослушиватель событий для поиска прокрутки и противодействовал пользователям, которые пытались выполнить горизонтальную прокрутку.
var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);
Я видел, что кто-то сделал что-то подобное, но, видимо, это не сработало. Это, однако, работает отлично для меня.

easa · Accepted Answer · 2015-07-16 06:48:55

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

MoolsBytheway · Accepted Answer · 2017-10-17 03:28:58

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

вот ссылка на пост на 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%

надеюсь, что это помогает!

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

ffffff · Accepted Answer · 2018-01-19 00:14:15

koala_dev ответил, что это будет работать:
html, body {
   max-width: 100%;
   overflow-x: hidden;
}
и MarkWPiper комментирует, что": - / вызвал прокрутку touch / momentum, чтобы перестать работать на iPhone"

решение для поддержания касания / импульса на iPhone-это добавить эту строку:
    height:auto!important;

Austin Brunkhorst · Accepted Answer · 2013-07-20 01:51:39

вы можете переопределить событие прокрутки тела с помощью 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;
});
Я не советую делать это, потому что это ограничивает функциональность для пользователей с маленькими экранами.

SchadeM · Accepted Answer · 2018-06-20 00:04:27

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

.

The Fool · Accepted Answer · 2018-07-08 03:17:42

Я просто должен был справиться с этим сам. Ведь я нашел этот метод самым простым и полезным. Просто добавьте
overflow-x: hidden;
к вашему внешнему родителю. В моем случае это выглядит так:
<body style="overflow-x: hidden;">
вы должны использовать overflow-x потому что если вы используете просто использовать overflow вы также отключаете вертикальную прокрутку, а именно overflow-y

если вертикальная прокрутка по-прежнему отключена, вы можете включить ее явно с помощью:
overflow-y: scroll;
Я знаю, что это несколько не правильно потому что, если бы все было настроено хорошо, не пришлось бы использовать этот быстрый и грязный метод.

Fabian von Ellerts · Accepted Answer · 2018-07-24 12:47:27

Если вы хотите отключить горизонтальную прокрутку по всей ширине экрана, используйте этот код.
element {
  max-width: 100vw;
  overflow-x: hidden;
}
это работает лучше, чем" 100%", потому что он игнорирует родительскую ширину и вместо этого использует видовой экран.

user8491101 · Accepted Answer · 2018-08-07 22:45:23

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }
применить стиль, или вы можете создать функцию в javaScript чтобы решить эту проблему