Горизонтальная прокрутка CSS: определение, и как убрать на всех разрешения
Горизонтальный скролл является довольно спорным элементом в веб-разработке, и неважно, как он организован: при помощи CSS или других подходов. «Спорный» потому, что нужно умело применять этот инструмент. В некоторых случаях он может привести к проблемам на ресурсе, а в других — принести массу удобств.
Горизонтальный скролл не приветствуется поисковыми системами. Гугл не раз уже обозначал, что сайты с горизонтальным скроллом будут ранжироваться ниже в поисковой выдаче. Однако это касается случаев, когда горизонтально скроллится вся страница сайта из-за того, что неправильно прописаны стили или сайт не адаптирован под разные размеры экрана. Если скролл организован специально в отдельном блоке для более удобного расположения контента, тогда это требование не касается сайта.
В общем, сегодня мы обсудим:
что такое горизонтальный скролл;
когда его можно использовать;
когда его лучше устранять;
как убрать горизонтальный скролл возможностями CSS.
Горизонтальный скролл CSS
Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень», плюс пользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива, и поисковые системы жестко определили свою позицию.
Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однако горизонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же, скроллится вся страница веб-сайта — это плохо.
Горизонтальный скролл CSS: особенности
Мы собрали ряд важных особенностей о горизонтальном скролле. Прочитав их, вы сможете понять, нужен ли он вам на сайте.
Особенности горизонтального скролла:
В веб-версиях ресурса он не заметен.
Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это неудобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
В мобильной версии веб-сайта горизонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например, товары одной категории в интернет-магазине. Допустим, у вас есть несколько важных категорий товара, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под другом, а товар в них размещаете так, чтобы он скроллился горизонтально.
Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.
В целом, горизонтальный скролл на небольших экранах удобен, когда нужно показать пользователю много разносторонней информации, чтобы он смог решить, что ему интересно, а что — нет. Однако важно правильно и заметно обозначать, что на странице организован горизонтальный скролл, чтобы пользователь понимал о том, что «в стороне» есть какой-то контент. Обычно это организовывают большими кнопками «вправо/влево». Причем четкое обозначение скролла касается и мобильной, и компьютерной версии сайта. Для того чтобы скролл был заметен в компьютерной версии веб-сайта, его автоматизируют. Большинство пользователей встречало такую интерпретацию горизонтального скролла, как слайд-шоу.
В общем, горизонтальный скролл не является рекомендованным элементом, который нужно использовать, но в некоторых случаях он незаменим, например: блок с товарами, объявлениями, фотографиями и др.
Иногда вместо него используют блок с контентом и кнопкой «Показать еще». Таким образом, если пользователя заинтересует контент, ему нужно будет не скролить «в сторону», а просто нажать кнопку «Показать еще», и контейнер с контентом «развернется». Организовать горизонтальный скролл можно разными способами, в том числе и при помощи CSS. Важно подходить к его организации со всей ответственностью, чтобы скролл приносил пользу, а не дополнительное неудобство для пользователей. Но бывают случаи, когда горизонтальный скролл появляется нежданно и от него нужно избавляться. В этом случае на помощь придет определенное CSS-свойство.
Как убрать горизонтальный скролл с помощью CSS
Прежде чем убрать горизонтальную прокрутку возможностями CSS, давайте выясним, из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.
Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы.
Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»
Свойство «overflow» обрезает весь контент, выходящий за рамки блока, для которого оно назначено. То есть, если у вас образовалась горизонтальная прокрутка всей веб-страницы и вы не можете найти элемент, который ее провоцирует, тогда можно применить свойство «overflow» к элементу «html» и/или «body».
Код будет таким:
html {
overflow: hidden;
}
и/или
body {
overflow: hidden;
}
Нужно отметить, что свойство «overflow» — это общее свойство.
overflow-х — свойство, отвечающее за горизонтальную прокрутку;
overflow-у — свойство, отвечающее за вертикальную прокрутку.
Поэтому, если нужно избавиться от какой-то отдельной прокрутки, можно использовать не общее, а точное свойство.
Заключение
Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».
Горизонтальная прокрутка не рекомендована к использованию, однако в отдельных случаях без нее никак не обойтись. Поэтому, прежде чем ее создавать или удалять, нужно тщательно все обдумать.
Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавиться от горизонтальной прокрутки, нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».
Оно включает в себя:css скрытая полоса прокрутки, совместимая с Google, Firefox, IE и другими браузерами
Теги: внешний интерфейс
В проекте эффект страницы должен отображать мобильный эффект страницы с использованием фонового изображения в стиле мобильного телефона Apple.
Как показано ниже:
В Google Chrome полоса прокрутки плавно скрывается, как показано на рисунке 1, но Firefox выглядит так, как показано на рисунке 2, с набором уродливых полос прокрутки.
Один код CSS, скрыть полосу прокрутки
div::-webkit-scrollbar {
display:none
}Но он несовместим с Firefox, из-за чего у людей возникают проблемы с мозгами.Следующий небольшой метод решает проблему скрытой полосы прокрутки Firefox.
Прилагаемый код выглядит следующим образом
CSS
<style>
.tp_box{
width: 500px;
height: 400px;
overflow: hidden;
}
.tp_box1{
width: 517px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
}
.tp_box2{
width: 100%;
height: 500px;
background: pink;
}
.tp_box3{
width: 100%;
height: 500px;
background: red;
}
. tp_box4{
width: 100%;
height: 500px;
background: black;
}
</style>
HTML
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>Как правило, ширина полосы прокрутки по умолчанию составляет 17 пикселей, нам нужно только поместить большое поле за пределами поля с полосой прокрутки, а дочернее поле на 17 пикселей шире, чем большое поле (эти 17 пикселей просто сохраняют положение полосы прокрутки), например, настройка большого окна 100 пикселей, для дочернего поля установлено значение 117 пикселей, а затем добавьте overflow: hidden; в большое поле, чтобы скрыть лишнюю часть, тогда достигается так называемый эффект скрытой полосы прокрутки. Фактически, полоса прокрутки не скрыта, но она скрыта и невидима. практичный.
С ДЕМО:
Облачный диск Blue Play:нажмите, чтобы скачать
личный блогhttp://www.
sharedblog.cn/?post=199
Персональная мини-программа WeChat
Интеллектуальная рекомендация
Напишите монитор журнала через Websocket
Фронт-код Фоновый код pom WebSocketConfig LogWebsocketHandle LogThread…
hdu 1158 Планирование занятости (динамическое планирование)
Название ссылки: http://acm.hdu.edu.cn/showproblem.php?pid=1158 Отчет о решении проблемы: я чувствую, что уравнение состояния этой проблемы не просто. Сначала я использовал одномерный подход, п…
Пейджинговая клиентская пейджинговая таблица и серверная пейджинговая страница
В этой статье не рассказывается, как использовать этот плагин, в основном представлены вещи, на которые следует обратить внимание при использовании: 1. Пейджинг на стороне сервера Установите свойство …
Redis команда для работы с различными типами
1. Что такое Redis Redis — это высокопроизводительная система хранения ключей и значений с открытым исходным кодом, разработанная с использованием языка Си, которую мы можем представить как карту Java.
..
Как получить доступ к файловой системе Hadoop через браузер
Как получить доступ к файловой системе Hadoop через браузер Откройте браузер, введите: (Google Browser, то есть не кажется) 192.168.x.xxx：50070 Входить Фронт для вашего собственного IP-адреса виртуаль…
Вам также может понравиться
5. Анализ исходного кода SOFAJRaft — как хранить данные в RheaKV?
обзор В предыдущей статье говорилось о том, как инициализируется RheaKV, поскольку RheaKV в основном используется для хранения KV, чтение и запись RheaKV довольно сложны, а совместная запись будет сли…
Используйте Python 3 для обработки задач ввода и выходных данных
Вопросы по программированию алгоритма письменных тестов часто указываются в формате ввода и вывода. И для того, чтобы пройти тест в Интернете, ввод и выходной формат примера должен быть строго соблюда…
5 минут Научитесь использовать статистику данных Excel
Использование диапазон Excel, это очень много друзей , которые очевидны, это может сделать основные формы, она также может быть использована для статистических данных или анализа данных, то есть функц.
..
FRP использовать
необходимость Я использовал Autossh, чтобы нести ответственность за картирование порта на хосте глубокого обучения, чтобы начать несколько команд, и теперь используйте FRP выполнить https://github.com…
Используйте NSurlsession
NSURLSESSE и его связанные классы предоставляют API, загруженные через http. Этот класс предоставляет богатый метод доложения для поддержки проверки, а также выполнения загрузок в фоновом режиме (когд…
Создание div с вертикальной прокруткой с использованием CSS. Горизонтальная прокрутка на чистом CSS
Иногда необходимо большой кусок текста разместить в маленьком окошке, который полностью туда не помещается, для решения этой проблемы легко создать слой с прокруткой — div с прокруткой .
Понадобится
Слой с фиксированным размером и CSS-стиль.
CSS
В CSS-классе.scroll устанавливаются параметры 600px в длину и 300px в высоту, внутренний отступ, рамка и цвет фона. НО! Самое главное параметр overflow:auto устанавливает появление полосы прокрутки при количестве текста большим, чем размер слоя.
Scroll { width:500px; height:300px; /* необходим фиксированный размер */ overflow:auto; /* прокрутка появляется по необходимости */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; }
HTML
Наибольшее распространение получили этиленгликолевые охлаждающие жидкости
на основе этиленгликоля и воды (дистиллированной) с комплексом присадок.
Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество
антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую
очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить
за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости
из системы.
Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно
составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.
При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость.
После слива
старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых
оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.
Результат
На экране вы увидите небольшую рамку с текстом и с границей серого цвета.
Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок.
Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы.
Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.
При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой
В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .
О полезном свойстве overflow
Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.
overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.
Код CSS
Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}
Свойства и значения overflow
visible — отображается все содержание элемента, даже за пределами установленной ширины.
hidden — отображается только область внутри элемента, остальное скрыто.
scroll — принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto — автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.
Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности
Код CSS
Prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */
overflow: auto; /* свойство для прокрутки по горизонтали.
Автоматом, если больше блока */
}
Принудительная установка прокрутки в блоке CSS
Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.
Код HTML и CSS
Prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
}
Пример div блока с прокруткой
Код HTML и CSS
Пример работы CSS
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.
Рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.
На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.
Конечно, во многих случаях не обойтись без задания конкретных размеров области посредством width и height (ширины и высоты блока), которые могут принимать .
В общем, рассмотрим ниже примеры действия свойства оверфлоу во всех возможных вариантах.
Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума W3C (данные представлены по версии CSS2.1, хотя они действительны и поддерживаются в более новой версии CSS3):
Как видите, оверфлоу имеет 4 основных параметра (visible, hidden, auto, scroll) и значение inherit, которое можно прописать при желании присвоить , однако по умолчанию это правило не наследуется (inherited: no на скриншоте). Дефолтным же значением является висибл (initial: visible).
Прежде, чем приступить к исследованию посредством практических примеров, давайте уясним для себя некоторые детали. Как уже было сказано выше, правило оверфлоу позволяет управлять содержимым блочного элемента в тех случаях, когда оно не помещается в его пределах. Это напрямую следует из названия данного CSS правила (overflow в переводе с английского означает переполнение, избыток.
)
Предварительно вы можете ознакомиться, в чем состоит , перейдя по предоставленной ссылке. Кроме того, нелишним будет пробежать взглядом материал о , которое и придает элементам на странице блочные характеристки.
Возьмем для примера контейнер DIV (в подробнее о дивах как основе блочной верстки), подкрасим его с помощью background, через атрибут style, и поместим внутрь произвольный текст:
TEXT…
Итоговый результат будет примерно таким:
У нас не определена ширина (width) контейнера. В этом случае, если вы помните, блочный элемент занимает все доступное ему место по ширине. А вот высота (height) блока, ежели она не указана, определяется именно содержанием (в нашем примере присутствующим там текстом).
Правило оверфлоу для блоков, содержащих контент, который невозможно распределить по высоте
Выше я предложил пример, когда блочный элемент содержит текст, который при ограничении ширины может перераспределяться (с помощью изменения переноса слов).
Это сейчас особенно актуально при применении адаптивного дизайна для просмотра на мобильниках. Однако, бывает так, что содержимое по той или иной причине не обладает такой гибкостью.
Возьмем для начала те же условия, что и в примере, который мы разобрали выше. Как помните, при указании фиксированной ширины блока контент перераспределялся таким образом, что не превышал границы по горизонтали, но одновременно увеличивал высоту контейнера (вместе с содержимым) по вертикали. Теперь изменим содержание и стандартный текст заменим длинными словами без пробелов с указанием width:
Обратите внимание, что теперь содержимое при ограничении ширины сразу превысило границы по горизонтали. И если пропишем overflow hidden, то тем самым обрежем контент :
Добавление прокрутки с помощью параметров scroll и auto правила overflow
Теперь разберем тот случай, если ширина и высота контейнера фиксированные, но не умещающийся в нем контент желательно оставить доступным.
Возьмем тот же пример c фиксированными шириной и высотой, только значение height для наглядности укажем в 60px, добавив overflow:scroll к CSS стилям:
TEXT…
В результате по вертикали и горизонтали появились полосы прокрутки (scrollbars):
Таким образом, контент становится доступным, пусть и с помощью скроллинга. Однако, обратите внимание, что сформировалась не только вертикальная прокрутка, которая нужна для полного просмотра, но и горизонтальная, которая не является активной. Это особенность именно значения scroll.
Хочу отметить, что у основного правила стилей есть вариации в виде overflow-x и overflow-y, которые принимают те же значения (visible, hidden, scroll, auto), что и базовый оверфлоу, только заданные параметры применяются к содержимому блоков по горизонтали (x) и по вертикали (y).
Правило CSS text-overflow (clip, ellipsis)
А теперь познакомимся с модификацией выше описанного свойства оверфлоу, которое появилось только в CSS3.
О нем можно получить информацию на соответствующей официальной странице (редакторский черновик консорциума W3C):
Свойство text-overflow имеет 2 основных значения (clip и ellipsis). Оно действует только в том случае, если указан overflow, значение которого отлично от visible. А это, как вы помните, параметр по умолчанию, поэтому в стилях для соответствующего элемента должен обязательно присутствовать оверфлоу с hidden, scroll или auto.
Clip является дефолтным значением и просто обрезает текст. Поэтому задействуем text-overflow для нашего DIV с соответствующими CSS свойствами, добавив white-space:nowrap (для запрета переноса слов):
TEXT…
Как видите, ellipsis позволяет добавить многоточие вместо обрезанного текста, намекая на его продолжение. Чтобы придать логическое завершение данному примеру, можно дописать псевдокласс:hover для дива, который изменяет стиль элемента при наведении на него курсора:
Class1:hover {overflow:visible; white-space:normal;}
Теперь текст будет обрезан, но ежели вы наведете на него курсор мышки, то он будет появляться в полном объеме.
Можете в этом убедиться , перейдя по предоставленной ссылке.
Вы можете использовать overflow-y: scroll для вертикальной прокрутки.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Свойство overflow
управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | {1,4} |
| # | Повторять один или больше раз через запятую. | # |
×
Значения
visible Отображается всё содержимое элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { height: 80px; overflow: auto ; }
Пример
overflowГетерогенный голубой гель
Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow
Объектная модель
Объект .
style.overflow
Примечание
Internet Explorer до версии 7.0 включительно:
- относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .
Internet Explorer 8:
- Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
- Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
- Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы ( ,
, ).Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация
) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) — первая черновая версия стандарта.
Просмотров
Как создать прокручиваемый текст с помощью CSS [+ Шаблоны кода]
Умело используя HTML, CSS и JavaScript, вы можете создавать потрясающие веб-сайты. Но давайте не будем ходить вокруг да около — на самом деле написание кода иногда может показаться обыденным, особенно если вы только начинаете изучать основы.
Вот почему мы рекомендуем время от времени пробовать что-то новое. Может быть, это изучение нового элемента, который вы никогда раньше не использовали, или это эксперименты с CSS или фреймворком вроде Bootstrap.
Если сейчас вам кажется, что это один из таких моментов, продолжайте читать. В этом руководстве мы покажем вам, как создать прокручиваемый текст в HTML и CSS. С помощью этого забавного трюка вы можете сделать бегущую строку новостей, создать финальные титры для фильма или даже заставить посетителей почувствовать себя погруженными в далекую-далекую галактику.
Хотя веб-сайты лучше всего делать простыми и ориентированными на контент, некоторые творческие штрихи здесь и там могут привлечь новых посетителей. Ниже мы предоставили четыре шаблона кода, которые вы можете скопировать и настроить для удобного эффекта прокрутки текста.
Как создать прокручиваемый текст в CSS
Мы будем использовать анимацию CSS в сочетании со свойствами transform: translateX и transform: translateY для достижения прокрутки текста с помощью CSS.
Чтобы обеспечить кросс-браузерную совместимость, мы также добавим правила анимации с префиксами поставщиков -webkit- (для Safari и Chrome) и -moz- (для Firefox). Начнем с текста справа налево.
Текст с горизонтальной прокруткой CSS: справа налево
Чтобы наш текст прокручивался справа налево, мы поместим его в div с идентификатором scroll-text — это элемент, который будет перемещаться внутри своего div-контейнера, scroll-container . HTML, CSS анимации прокрутки и результат приведены ниже.
См. CSS прокрутки текста пером: справа налево Кристины Перриконе (@hubspot) на CodePen.
В конце концов, вам придется немного поработать с CSS, чтобы эффект прокрутки выглядел так, как вы хотите. Чтобы изменить скорость прокрутки, измените значение секунд в анимация свойство от 10s до чего-то другого.
Более низкое значение ускоряет эффект прокрутки, а более высокое значение замедляет его.
На скорость прокрутки также влияет ширина блока div: чем шире контейнер прокрутки, тем быстрее будет прокручиваться текст. Это означает, что скорость текста меняется при изменении размера окна браузера. Чтобы решить эту проблему, вы можете установить ширину контейнера прокрутки на определенное значение в пикселях.
Текст с горизонтальной прокруткой CSS: слева направо
Для прокрутки текста слева направо просто поменяйте местами положительное и отрицательное значения translateX . Итак, мы изменим все экземпляры 100% на -100% и все экземпляры -100% на 100% . Я также выровнял текст внутри scroll-text по правому краю, чтобы текст отображался сразу в начале анимации.
См.
CSS прокрутки текста пером: слева направо Кристины Перриконе (@hubspot) на CodePen.
Текст с вертикальной прокруткой CSS: снизу вверх
Чтобы текст прокручивался вертикально, измените все экземпляры translateX на translateY . Я также отцентрировал текст, уменьшил продолжительность анимации до 5 секунд и присвоил контейнеру div значение высоты, чтобы вертикальная прокрутка была более заметной.
См. CSS прокрутки текста пером: снизу вверх от Кристины Перриконе (@hubspot) на CodePen.
Текст с вертикальной прокруткой CSS: сверху вниз
Как и в случае с горизонтальной прокруткой, нам просто нужно поменять местами положительные и отрицательные значения translateY , чтобы изменить направление вертикальной прокрутки:
См.
CSS прокрутки текста пером: сверху вниз от Christina Perricone (@hubspot) на CodePen .
JavaScript Scrolling Text
Для более сложных и динамичных прокручиваемых текстовых элементов может потребоваться JavaScript для имитации эффекта выделения, а не исключительно CSS-анимации. Вот несколько примеров использования JavaScript для этой цели.
В этом первом примере используется JavaScript (в частности, jQuery) для создания анимации вращающейся бегущей строки из группы элементов списка. Отличительной особенностью этой реализации является то, что вы можете добавить столько элементов списка, сколько хотите, без необходимости изменять сценарий.
См. Прокручиваемый горизонтальный текст Pen Infinite Джонатана Марзулло (@jonathan) на CodePen.
Источник
Следующий пример запускает боковую прокрутку текста в результате действий пользователя по прокрутке.
Это довольно распространено на веб-сайтах и добавляет дополнительную размерность для повышения вовлеченности.
См. текст с горизонтальной прокруткой ручкой Николы Антика (@nikantic) на CodePen.
Источник
Примеры прокрутки текста
Одно дело увидеть базовый пример прокрутки текста в качестве демонстрации, и совсем другое — увидеть, как он работает в дизайне веб-сайта. Для вдохновения вот несколько примеров того, как может выглядеть ваш прокручиваемый текст.
Digital of Things
Студия пользовательского опыта Digital of Things использует прокручиваемый текст на своей домашней странице, добиваясь эффекта выделения на всю страницу. Это минимально, но впечатляюще, и текст перемещается относительно медленно, чтобы не перегружать посетителя.
Источник изображения
Соус Mama Joyce Peppa
Прокручивающийся текст доминирует на домашней странице этого бренда острого соуса.
При прокрутке вниз текст перемещается слева направо, справа налево и вертикально по странице. Это удовольствие для глаз, которое обязательно привлечет внимание любого, кто ищет новую начинку на рынке.
Источник изображения
Призыв восстановить надежду
На этом веб-сайте фонда помощи при стихийных бедствиях реализована более тонкая прокрутка текста. Дизайнеры сосредоточили внимание на изображениях и статьях, расположив прокручиваемый текст в нижней части экрана. Опять же, этот текст движется медленно, так как его размер затрудняет чтение на более высоких скоростях.
Источник изображения
Squadeasy
Страница 404 Squadeasy действительно хорошо помогает вам понять, что это страница 404, благодаря прокрутке текста по всему экрану. Кроме того, плавающая голова щенка в центре обеспечивает легкость.
Источник изображения
Andrew Leguay
Наконец, у нас есть сайт-портфолио дизайнера Andrew Leguay.
Прокрутите домашнюю страницу вниз, и вы заметите умное использование прокручиваемого текста для демонстрации брендов, с которыми он сотрудничал. Этот прокручиваемый текст также слегка наклонен, что помогает элементу страницы выделяться еще больше.
Источник изображения
Прокручиваемый текст HTML5: примечание к элементу выделения
В дополнение к CSS-анимации существует еще один способ создания прокручиваемого текста с помощью чистого HTML — с помощью элемента