Другое

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

Lorem ipsum dolor

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

Горизонтальный скролл не приветствуется поисковыми системами. Гугл не раз уже обозначал, что сайты с горизонтальным скроллом будут ранжироваться ниже в поисковой выдаче. Однако это касается случаев, когда горизонтально скроллится вся страница сайта из-за того, что неправильно прописаны стили или сайт не адаптирован под разные размеры экрана. Если скролл организован специально в отдельном блоке для более удобного расположения контента, тогда это требование не касается сайта.

В общем, сегодня мы обсудим:

  •  что такое горизонтальный скролл;

  •  когда его можно использовать;

  •  когда его лучше устранять;

  •  как убрать горизонтальный скролл возможностями CSS.

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

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

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

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

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

Особенности горизонтального скролла:

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

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

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

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

В целом, горизонтальный скролл на небольших экранах удобен, когда нужно показать пользователю много разносторонней информации, чтобы он смог решить, что ему интересно, а что нет. Однако важно правильно и заметно обозначать, что на странице организован горизонтальный скролл, чтобы пользователь понимал о том, что «в стороне» есть какой-то контент. Обычно это организовывают большими кнопками «вправо/влево». Причем четкое обозначение скролла касается и мобильной, и компьютерной версии сайта. Для того чтобы скролл был заметен в компьютерной версии веб-сайта, его автоматизируют. Большинство пользователей встречало такую интерпретацию горизонтального скролла, как слайд-шоу.

В общем, горизонтальный скролл не является рекомендованным элементом, который нужно использовать, но в некоторых случаях он незаменим, например: блок с товарами, объявлениями, фотографиями и др. Иногда вместо него используют блок с контентом и кнопкой «Показать еще». Таким образом, если пользователя заинтересует контент, ему нужно будет не скролить «в сторону», а просто нажать кнопку «Показать еще», и контейнер с контентом «развернется».

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

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

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

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

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

Свойство «overflow» обрезает весь контент, выходящий за рамки блока, для которого оно назначено. То есть, если у вас образовалась горизонтальная прокрутка всей веб-страницы и вы не можете найти элемент, который ее провоцирует, тогда можно применить свойство «overflow» к элементу «html» и/или «body».

Код будет таким:

html {

overflow: hidden;

}

 

и/или

 

body {

overflow: hidden;

}

 

Нужно отметить, что свойство «overflow» это общее свойство. Оно включает в себя:

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

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

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

Заключение

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

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

Схожие статьи

Инициализация, присваивание и объявление переменной в Си, ошибки
Другое

Инициализация, присваивание и объявление переменной в Си, ошибки

Cosmos: операционная система, ее требования и пошаговая установка
Другое

Cosmos: операционная система, ее требования и пошаговая установка

Как обучиться на программиста самостоятельно и без посещения курсов
Другое

Как обучиться на программиста самостоятельно и без посещения курсов

Интеграционное тестирование: определение, виды и примеры
Другое

Интеграционное тестирование: определение, виды и примеры