Как отключить горизонтальную прокрутку css
Перейти к содержимому

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

  • автор:

Убираем горизонтальный скролл в мобильной версии сайта

Admin 05.05.2017 , обновлено: 13.09.2017 CSS, WordPress

Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.

Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:

html, body <
/* Убирает прокрутку по горизонтале, для мобильной версии */
overflow-x: hidden;
>

Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.

Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.

У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.

Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.

Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.

А внутри HTML кода он вносил изменения и эту форму:

Менял на следующую:

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

Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:

#respond form input[type=»text»], #respond form textarea <
width: 100%;
>

Я уменьшил поле комментариев со 100% до 97%.

#respond form input[type=»text»], #respond form textarea <
width: 97%;
>

После этого возможность горизонтального скролинга исчезла.

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Комментарии к статье “ Убираем горизонтальный скролл в мобильной версии сайта ” (10)

30.09.2017 в 21:53
Спасибо
помогло html не убирал, теперь все нормально
15.02.2019 в 18:21

У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru

Автор записи
16.02.2019 в 11:38

На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.

28.08.2020 в 12:38
Ребята, такая же проблема. Кто поможет исправить?
28.08.2020 в 12:54

Sam, Как описал мне админ, мне это помогло
28.08.2020 в 14:47

Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru

Автор записи
29.08.2020 в 01:51

Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали �� Вам надо поставить overflow-x: hidden;.

29.08.2020 в 18:49

Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле» P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.

30.08.2020 в 13:04

Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!

16.11.2020 в 19:31

Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru

Добавить комментарий Отменить ответ

Если возникнут вопросы пишите на электронную почту.

Как убрать горизонтальный скролл в html

Для устранения горизонтального скролла в HTML можно использовать несколько подходов:

  • CSS свойство overflow-x: hidden для тега body или для конкретного контейнера, который вызывает появление скролла.
body  overflow-x: hidden; > 
  • Ширина контейнера. Можно уменьшить ширину контейнера, чтобы он соответствовал ширине экрана и не вызывал появление скролла.
.container  width: 100%; max-width: 1200px; /* например, максимальная ширина контейнера */ margin: 0 auto; /* центрирование */ > 
  • Уменьшение размеров элементов на странице. Если на странице есть элементы, которые вызывают горизонтальный скролл, то можно уменьшить их размеры или перенести на другие места на странице.
  • Использование медиа-запросов. Можно задать разные стили для разных размеров экрана, чтобы избежать появления скролла на устройствах с маленькими экранами.
@media screen and (max-width: 768px)  .container  width: 100%; max-width: 100%; > > 

В зависимости от конкретной ситуации, можно использовать один или несколько из перечисленных выше подходов.

Как убрать горизонтальную полосу прокрутки | CSS

Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed .

длина окна:

 div 
тысячадевятьсотдевяностодевятикилограммовый

То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.

direction: rtl;

 
тысячадевятьсотдевяностодевятикилограммовый

Можно запретить появление горизонтальной полосы прокрутки и обрезать выходящее за страницу содержимое, но это лишь усугубит проблему — чтобы читатель имел возможность прокрутить страницу, нужно будет разрабатывать и подключать JavaScript

длина окна:

 html, body тысячадевятьсотдевяностодевятикилограммовый

Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать

длина окна:

 body тысячадевятьсотдевяностодевятикилограммовый

Убрать горизонтальный скролл

Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?

Отслеживать
задан 22 мая 2012 в 15:19
3,197 7 7 золотых знаков 46 46 серебряных знаков 95 95 бронзовых знаков

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

Добавляем к блоку в котором нужно убрать скролл стиль (в CSS или напрямую)

overflow:hidden; overflow-y:hidden; /*для вертикального*/ overflow-x:hidden; /*для горизонтального*/

Отслеживать
ответ дан 22 мая 2012 в 16:53
174 7 7 бронзовых знаков

@UndReim вместо использования тегов pre чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.

23 мая 2012 в 11:17

Всё очень просто пишем:

html < width: 100%; max-width: 100%; overflow-x: hidden; >body

Отслеживать
81.2k 9 9 золотых знаков 78 78 серебряных знаков 136 136 бронзовых знаков
ответ дан 4 мая 2017 в 9:49
81 1 1 серебряный знак 1 1 бронзовый знак

#wrapper

Обычно такого хватает. # wrapper — обертка всего сайта, обычно идет следом за body

Отслеживать
ответ дан 22 мая 2012 в 16:52
14.3k 1 1 золотой знак 22 22 серебряных знака 35 35 бронзовых знаков
overflow: show — что?
4 мая 2017 в 10:03
Отслеживать
ответ дан 25 мая 2012 в 8:08
4,966 10 10 золотых знаков 33 33 серебряных знака 62 62 бронзовых знака

контейнеру, в который не влазит контент добавить свойство overflow:hidden; это скроет непомещающиеся части.

Отслеживать
ответ дан 24 мая 2012 в 10:37
1,596 8 8 серебряных знаков 15 15 бронзовых знаков

если я правильно понял, то одно из свойств CSS вам должно помочь position: absolute. А также можно поиграться вот с этими свойствами max-width и min-width. Можно еще попробовать обернуть картинку в DIV и этому же DIV`у задать background, и указать размеры картинки которая задана фоном.

Отслеживать
ответ дан 22 мая 2012 в 16:42
1,712 4 4 золотых знака 24 24 серебряных знака 51 51 бронзовый знак

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *