Почему появляется горизонтальная прокрутка css html

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

Lorem ipsum dolor

Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.

Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.

Горизонтальный скролл CSS: особенности

  1. В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.

  2. Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.

  3. В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.

  4. Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.

Как убрать горизонтальный скролл с помощью CSS

Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.

Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

  • overflow-х — свойство, отвечающее за горизонтальную прокрутку;

  • overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

Горизонтальная прокрутка не рекомендована к использованию , о днак о в отдельных случая х б ез нее никак не обойтись. Поэтому , прежде чем ее создавать или удалять, нужно тщательно все обдумать.

Мы будем очень благодарны

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

На мобильных появляется горизонтальная прокрутка, как убрать?

VicTHOR

VicTHOR, товарищ попросил ему сайт сделать, домен старый свой был, пока на нём тестим, потом перенесу ;))
O8ti5WrOeDc.jpgx0NSuzQ-nfw.jpg

VicTHOR

Igor_307

  • Facebook
  • Вконтакте
  • Twitter

Igor_307

seminyuri, потестил сайт(firefox, chrome) и с пк и с мобильного (chrome) никакаго скрола нет
как вариант можно задать всем элементам section

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

«…у меня проблема, если параметр padding: 20px; меняю хоть на 1 пиксель меньше 20ти то появляется горизонтальная прокрутка, что только не пробовал, кстати у вас она (прокрутка) тоже имеет место быть. Как избавится от этого?» Этот вопрос возник в одном из комментариев к статье о резиновой теме F2. В тот момент я не смог адекватно ответить и подсказать посетителю, как решить его проблему, потому как, у меня на мониторе горизонтальная прокрутка отсутствовала. Спустя некоторое время, работая с другой темой, я обратил внимание на появившуюся горизонтальную прокрутку в нижней части окна браузера. Возвращать изменённые коды в таблице стилей в исходное состояние не стал, а дописал маленькую строчку, которая выглядит вот так:
overflow-x: auto;

Вставить её нужно в блок: body

font-family: Georgia, Arial, Helvetica, sans-serif;

margin: 0px; padding: 0px;

background-size: color: #102722;

Не забудьте обновить файл, а затем, обновить страницу сайта. Прокрутка должна исчезнуть. Но, если полоса прокрутки всё же отображается, проверьте, какой масштаб страницы у вас установлен, он может быть увеличен. Не обязательно менять масштаб, может вам удобнее читать страницу именно в таком масштабе. Нужно лишь вместо слова «auto» вписать слово «hidden«, т.е., запретить прокрутку полностью, вот так:

Теперь, горизонтальная прокрутка уже точно не будет отображаться.

Поделиться ссылкой:

Ещё из этой рубрики

Как скрыть логин админа из Html — кода

Как скрыть логин админа из Html — кода
Содержание:1 Как узнать имя админа2 Поделиться ссылкой: Как узнать имя админа Здравствуйте друзья! В предыдущей статье мы вроде бы как, затруднили взлом сайта путём изменения имени/логина администратора. Но.

Как сделать отступ в первой строке абзаца

Как сделать отступ в первой строке абзаца
Для придания тексту более удобной для чтения формы, применяют приём разделения длинного текста на абзацы, причём, в каждом абзаце первая строка имеет некоторый отступ слева. Чтобы добиться автоматического.

Как убрать кавычки из виджета «Рубрики» в шаблоне F2

Как убрать кавычки из виджета «Рубрики» в шаблоне F2
Содержание:1 Спрятать или заменить символ Юникода Поделиться ссылкой: Спрятать или заменить символ Юникода В последнее время участились вопросы посетителей о том, как убрать “стрелочки” слева от ссылок.

Как создать градиенты в теме F2 без сервиса и без редакторов

Как создать градиенты в теме F2 без сервиса и без редакторов
Содержание:1 Как вставить линейный градиент в шапку блога2 Поделиться ссылкой: Как вставить линейный градиент в шапку блога Здравствуйте уважаемые друзья, подписчики и просто интересующиеся. В статье: “Дизайн сайдбаров в.

Как вставить картинку в шапку темы F2
Приветствую Вас, Друзья! Эта статья является продолжением предыдущего поста: Как сделать резиновую шапку для сайта. Сейчас мы рассмотрим, как изменять шрифты и их размер в заголовке и подзаголовке, как.

9 комментариев

Аватар

Чудны дела твои, господи! Михаил, вчера я точно туда и вставляла эту строку и ни-че-го! А сейчас, пока календарь дописываю, нате, вам, пожалуйста. Как хочешь, так и понимай. В любом случае-спасибо. Пусть мне это особо не мешало, но приятнее без этих хвостов.

Аватар

У меня все, как всегда-не срабатывает. Пол сантиметра прокрутки как было, так и есть.

Аватар

Оксана, а ссылка есть на сайт? Я хочу посмотреть.

Аватар

О! Что-то мне этот комментарий не пришел. Ссылка есть, конечно. greens-avenue.ru Но я удалила эти записи, раз не сработало. Добавить назад?

Аватар

Оксана, а у меня есть вход на Ваш сайт? Я уже не помню, делали мы на этот сайт вход.

Аватар

На него крооме меня никто входа не имеет 🙂

Аватар

Оксана, если хотите, добавьте меня в пользователи, придумайте мне временный пароль и имя, и присвойте мне временно роль Администратор. Я зайду в админку и впишу код куда нужно. Потом переприсвоите роль на Подписчик или совсем удалите (по желанию). Имя и пароль пришлите мне по почте, чтобы в третьи руки не попало.

Аватар

Полысеть можно, пока этого пользователя добавишь. То пароль не нравится, то имя надо не на русском. Отправила на почту которая у Вас в контактах указана.

Аватар

Да, я когда первых десять посетителей добавлял в пользователи тоже чертыхался. Я обычно девчатам и ребятам пишу по почте свои имя и пароль через скайп или почту, а тут отослал по почте, а письмо не прошло. Пришлось по другому поступить. Но это опыт хороший, пригодится.

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

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