Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения
Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.
Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.
Горизонтальный скролл CSS: особенности
- В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
- Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
- В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.
- Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.
Как убрать горизонтальный скролл с помощью CSS
Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.
Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».
Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»
- overflow-х — свойство, отвечающее за горизонтальную прокрутку;
- overflow-у — свойство, отвечающее за вертикальную прокрутку.
Заключение
Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».
Горизонтальная прокрутка не рекомендована к использованию , о днак о в отдельных случая х б ез нее никак не обойтись. Поэтому , прежде чем ее создавать или удалять, нужно тщательно все обдумать.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Убрать горизонтальный скролл
Учусь верстать макет, графика выходит за пределы 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
Отслеживать
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
ответ дан 4 мая 2017 в 9:49
81 1 1 серебряный знак 1 1 бронзовый знак
#wrapper
Обычно такого хватает. # wrapper — обертка всего сайта, обычно идет следом за body
Отслеживать
ответ дан 22 мая 2012 в 16:52
14.3k 1 1 золотой знак 21 21 серебряный знак 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.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как убрать горизонтальный скролл в 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
Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.
Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:
body overflow: hidden; > Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:
.container overflow: hidden; > Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .
Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:
body overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ > В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.