Почему появляется горизонтальный scroll?
Помогите пожалуйста решить проблему. Всегда ненавидел эту поганую горизонтальную прокрутку которая своим видом еще более уродует дизайн сайта чем вертикальная. Но у меня никак не получается её убрать из за того что я делаю div 100% с внутренними отступами по 50px. И такая ерунда на всех сайтах которые я делаю с 100% шириной экрана.
Почему так происходит? Как мне можно исправить ситуацию? Внутри находятся элементы галереи. Я не могу задать каждому элементу отступ по 50рх слева, только лишь для того чтобы они отступали от div. Буду рад любой помощи.
#container
- Вопрос задан более трёх лет назад
- 4569 просмотров
Комментировать
Решения вопроса 1
Дима Паутов @bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
#container <
box-sizing: border-box;
padding: 50px;
position:relative;
width:100%;
margin-top:160px;
height:auto;
>
Как убрать горизонтальный скролл в 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%; > > В зависимости от конкретной ситуации, можно использовать один или несколько из перечисленных выше подходов.
Убираем горизонтальный скролл в мобильной версии сайта
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
Добавить комментарий Отменить ответ
Если возникнут вопросы пишите на электронную почту.
Как исправить горизонтальный скролл на сайте
Верстальщики во время разработки сайта как правила сталкиваются с проблемой горизонтального скролла. В чем проблема? Откуда он появился? И как это исправить? Именно об этой и пойдет речь в этой записи.
Ниже я буду описывать способы нахождения элементов, которые создают горизонтальный скролл.
Первое решение
Предлагаю ваш сразу обратить внимание на этот способ.
После указания этого CSS, все элементы на странице будут обведены красным цветом — тем самым можно посмотреть где заканчиваются границы у всех блоков.
Иногда после этого сразу становится понятно какой блок вылазит за границы.
Второе решение
var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) < if (el.offsetWidth >docWidth) < console.log(el); >> );
Использовать JavaScript для поиска элементов.
Откройте консоль разработчика в вашем браузере. Нажмите F12 или Ctrl + Shift + i и перейдя во вкладку «Консоль» вставьте этот код и нажмите Enter. После этого у вас должно вывести ТОЛЬКО «undefined» или еще другие строки, например как на скриншоте ниже.
Третье решение
Вам нужно выделить весь контент (заваж мышкой и начать выделять весь текст сайта) и двигать его вправо, тем самым, вы можете найти блок который вылазит за границы. Чтобы визуально представить как это происходит — смотрите GIF’ку ниже.
Четвертое решение (ХАК)
Если из всего вышеперечисленного вам ничего не помогло, тогда предлагаю использовать следующий способ.
html, body
Это устанавливает 100% ширину для html и body, а так же убирает скролл по x-оси. Я не советую использовать этот способ, потому что он не решает проблему, а лишь маскирует ее.
Вывод
Вероятнее всего я выписал не все решения, но это основные, которые я использую. Как правило другие мне и не нужно были, так как эти отлично помогали.
А какие способы используете вы?