Можно ли предотвратить только горизонтальную прокрутку, когда overflow-x скрыт? - PullRequest
Новая
       39

Можно ли предотвратить только горизонтальную прокрутку, когда overflow-x скрыт?

7 голосов
/ 15 апреля 2010

У меня есть веб-страница, содержание которой выходит за правый край окна браузера. Я установил overflow-x: hidden на <body>, чтобы отключить нижнюю полосу прокрутки, но я все еще могу прокручивать по горизонтали с помощью трекпада, а это не то, чего я хочу.

Есть ли способ предотвратить горизонтальную прокрутку браузера?

В качестве примечания: Safari 4.0.4 иногда прокручивает только горизонтально, и прокрутка кажется «залипающей» и «нервной», тогда как Firefox всегда плавно прокручивает горизонтально.

Ответы [ 6 ]

3 голосов
/ 17 апреля 2010

Я думаю, что реальный вопрос заключается в том, почему ваш контент выходит за рамки предполагаемого размера страницы? Это контент, который вы не хотите, чтобы пользователи на самом деле видели? В этом случае, поместите его где-нибудь в div и установите для его отображения значение none. Это позволит полностью избежать проблемы переполнения.

Если есть веская причина, по которой вы хотите, чтобы он переполнял контейнер, то установите явно размер контейнера, а затем значение overflow-x скрытым. Я не проверял это, но это должно предотвратить текущее поведение. Если нет, попробуйте использовать div, а не тег body. Браузеры могут вести себя странно, потому что работают над самим тегом body.

2 голосов
/ 16 апреля 2010

вы можете попытаться установить в CSS: 

html{
  overflow-x: hidden;
}

вместо использования body селектора. Я попробовал это и работает в Firefox.

1 голос
/ 10 мая 2013

Я бы зашел в Chrome и открыл инструменты разработчика на рабочем столе. Удалите свойство overflow-x. Затем перейдите к удалению каждого родительского элемента на вашей странице. Когда вы видите, что горизонтальная полоса прокрутки исчезает, вы знаете, что нашли свою проблему. Затем погрузитесь в этот элемент. Я держу пари, что у вас ширина 100%, а затем наложено поле. Удалите поле, если это так.

1 голос
/ 16 апреля 2010

Если ничего не помогает, вы можете использовать Javascript, чтобы постоянно заставлять браузер прокручивать влево, используя window.scrollTo (xpos, ypos).Для xpos вы захотите использовать 0, а ypos вы захотите получить текущую позицию прокрутки пользователя, если вы хотите разрешить вертикальную прокрутку.

Вы можете поместить вызов функции в обработчик события window.onscrollили в интервале JavaScript, который выполняется каждые 100 мс или около того.Вам решать.Если вам нужны примеры кода, просто спросите.

0 голосов
/ 02 июня 2013

Старая дискуссия, но она может быть полезна людям, которые ищут правильный ответ!

Установите «overflow: hidden» в родительском div элемента, который шире, чем окно браузера (не html или body, как вы обычно это делаете), который остановит прокрутку с помощью de pad или arrow pad ...

0 голосов
/ 17 апреля 2010

Это было бы лучше понять, если бы у вас был пример.

это длинный URL или что-то без пробелов? У вас есть white-space:nowrap; установленный элемент?

Если у вас есть контейнер с определенным размером (тот, который помещается в окне просмотра), текст должен правильно придерживаться (если это не длинная строка без пробелов)

...