Overflow scroll как научить его быть постоянно внизу

overflow

The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* Global values */ overflow: inherit; overflow: initial; overflow: revert; overflow: revert-layer; overflow: unset;

Values

Overflow content is not clipped and may be visible outside the element’s padding box. The element box is not a scroll container. This is the default value of the overflow property.

Overflow content is clipped at the element’s padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content can be scrolled programmatically (for example, by setting the value of the scrollLeft property or the scrollTo() method), in which case the element box is a scroll container.

Overflow content is clipped at the element’s overflow clip edge that is defined using the overflow-clip-margin property. As a result, content overflows the element’s padding box by the value of overflow-clip-margin or by 0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new formatting context is created. To establish a formatting context, use overflow: clip along with display: flow-root . The element box is not a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box is a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view. Unlike scroll , user agents display scroll bars only if the content is overflowing and hide scroll bars by default. If content fits inside the element’s padding box, it looks the same as with visible but still establishes a new formatting context. The element box is a scroll container.

Note: The keyword value overlay is a legacy value alias for auto . With overlay , the scroll bars are drawn on top of the content instead of taking up space.

Description

Overflow options include hiding overflowing content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

The following nuances should be kept in mind while using the various keywords for overflow :

Specifying a value other than visible (the default) or clip for overflow creates a new block formatting context. This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
For an overflow setting to create the desired effect, the block-level element must have either a set height ( height or max-height ) or white-space set to nowrap .
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto .
The JavaScript Element.scrollTop property may be used to scroll through content in a scroll container, including when overflow is set to hidden .

Formal definition

overflow-x : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
overflow-y : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x or overflow-y is neither visible nor clip

Formal syntax

overflow =
[ visible | hidden | clip | scroll | auto ]

Examples

Demonstrating results of various overflow keywords

HTML

div> code>visiblecode> p class="visible"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>hiddencode> p class="hidden"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>clipcode> p class="clip"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>scrollcode> p class="scroll"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>autocode> p class="auto"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>overlaycode> p class="overlay"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div>

CSS

body  display: flex; flex-wrap: wrap; justify-content: start; > div  margin: 2em; font-size: 1.2em; > p  width: 5em; height: 5em; border: dotted; margin-top: 0.5em; > div:nth-of-type(5), div:nth-of-type(6)  margin-top: 200px; >

p.visible  overflow: visible; > p.hidden  overflow: hidden; > p.clip  overflow: clip; overflow-clip-margin: 1em; > p.scroll  overflow: scroll; > p.auto  overflow: auto; > p.overlay  overflow: overlay; >

Result

Accessibility concerns

A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a tabindex using tabindex=»0″ . Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate WAI-ARIA role ( role=»region» , for example) and an accessible name (via aria-label or aria-labelledby ) can mitigate this.

Specifications

Specification
CSS Overflow Module Level 3 # propdef-overflow

Browser compatibility

BCD tables only load in the browser

6 мощных возможностей CSS, которые позволяют обойтись без JavaScript

В последнее время часто сравнивают CSS и JavaScript, споря о применении этих технологий для решения определённых задач. Споры становятся жарче по мере появления новых замечательных возможностей CSS, которые позволяют упростить решение множества задач и отказаться при этом от JS.

CSS и JavaScript отлично работают в связке, у каждой из этих технологий есть собственные сильные стороны, но я уверен в том, что чем больше CSS используется для контроля внешнего вида и поведения интерфейсов, тем отказоустойчивее и надёжнее будут веб-приложения. Дело тут в следующем:

CSS, по своей природе, является технологией, устойчивой к отказам. Это значит, что когда CSS-парсер встречает свойство, которое он не понимает, он просто игнорирует его и идёт дальше. Другими словами, используя CSS, программист применяет стили и ожидает, что они окажутся работоспособными.
JavaScript отказоустойчивой технологией не является. Единственная синтаксическая ошибка в JS-коде может нарушить работу целого приложения. То есть, управляя стилизацией сайтов с помощью JS, совершенно необходимо проверять работоспособность соответствующих конструкций.

CSS даёт нам новые способы разработки фантастических решений, которые оказываются гораздо проще, чем соответствующие JS-решения, и которые легче создавать. Здесь имеются в виду многие возможности CSS: переходы, пользовательские свойства, анимации, фильтры, математические операции.

В этом материале я расскажу о некоторых интереснейших возможностях CSS (некоторые из них — очень свежие), о которых вы, возможно, ещё не знаете. А именно, речь пойдёт о плавном скроллинге, о свойстве position: sticky , и о других возможностях, для реализации которых раньше требовалось написать немало строк хитроумного JS-кода.

1. Плавная прокрутка

Раньше, для оснащения страницы плавной прокруткой, требовалось задействовать несколько строк JS-кода. А теперь эта задача может быть решена исключительно средствами CSS. Ну не замечательно ли это? Теперь воспользоваться плавной прокруткой можно, прибегнув к CSS-свойству scroll-behavior .

Вот как это выглядит:

html

Реализация плавной прокрутки

→ Вот пример на CodePen

Во время написания этого материала свойство scroll-behavior поддерживается лишь в Chrome и Firefox. Его пока не поддерживают Edge, IE и Safari (настольная и мобильная версии). Подробности о поддержке этого свойства можно узнать на Can I Use.

2. Закрепление элементов

Закрепление элементов — это одна из моих любимых возможностей CSS. Речь идёт о том, что соответствующие элементы не исчезают из области просмотра при прокрутке страниц. Теперь для закрепления элементов на страницах нет нужды прибегать к offsetTo и window.scrollY в JS. В наши дни можно просто воспользоваться CSS-свойством position: sticky :

header

Навигационный блок «упирается» в верхнюю границу области просмотра и не исчезает при прокрутке страницы

→ Вот проект на CodePen, в котором приведён пример использования свойства position: sticky

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

Взглянем на следующий HTML-код:

Меню (элемент nav из этого примера) можно будет зафиксировать только в области, которую перекрывает его родительский элемент ( main в нашем примере). В результате при использовании свойства position: sticky можно выделить два основных класса элементов:

Закрепляемый элемент: это тот элемент, к которому мы применяем свойство position: sticky ( nav в нашем случае). Этот элемент будет перемещаться в пределах родительского элемента до тех пор, пока не дойдёт до заданной позиции. Например — это может быть top: 0px .
Контейнер закрепляемого элемента: это — HTML-элемент, в котором содержится закрепляемый элемент. Это — та область, в пределах которой может перемещаться закрепляемый элемент. Этот «контейнер» определяет границы, в которых может существовать закрепляемый элемент.

Данная возможность отличается практически 100% браузерной поддержкой.

3. Обрезка текста

CSS даёт в наше распоряжение два чудесных свойства: text-overflow и line-clamp . Они позволяют обрезать тексты, аккуратно обращаясь со словами, и при этом избавляют нас от необходимости использовать для решения подобных задач JavaScript или какие-то другие сложные методы. Оба свойства не новы, но крайне полезны.

Обрезка текстов

→ Вот пример на CodePen

Давайте подробнее поговорим о свойствах text-overflow и line-clamp .

▍Свойство text-overflow

Это свойство управляет тем, как текст выводится в ситуациях, когда он, если не помещается в одной строке, должен быть обрезан. Пример такой ситуации показан на вышеприведённом рисунке, в заголовке карточки. Тут можно воспользоваться конструкцией text-overflow: ellipsis , что приведёт к тому, что в конец обрезаемого текста будет добавлен Unicode-символ ( … ).

Для того чтобы свойство text-overflow: ellipsis сделало бы своё дело, необходимо использовать так же свойства white-space: nowrap и overflow: hidden .

.card-title

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

▍Свойство line-clamp

Это свойство приходит нам на помощь в тех случаях, когда надо работать не с однострочным, а с многострочным текстом (пример такого текста — это содержимое карточки с вышеприведённого рисунка). Хотя это — часть стандарта CSS Overflow Module Level 3, который сейчас имеет статус «рабочего черновика («Working Draft»), данное свойство уже поддерживают порядка 95% браузеров, правда, с префиксом -webkit- . Перед его использованием важно учитывать то, что оно не даёт возможности управления количеством выводимых символов. Но оно, в любом случае, невероятно полезно.

Нам, чтобы им пользоваться, надо прибегнуть к старой реализации flexbox, применив свойства display: -webkit-box и -webkit-box-orient: vertical . Вот как это выглядит:

.card-description

4. Пользовательские CSS-свойства: CSS-переменные

В JavaScript-мире препроцессоры CSS (вроде Sass, Less и Stylus) — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но современным веб-дизайнерам доступны мощные стандартные возможности CSS, известные как пользовательские CSS-свойства или CSS-переменные.

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

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

Создавать CSS-переменные очень просто. А именно, для объявления переменной достаточно поставить два тире ( — ) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var() , передавая ей созданную ранее переменную в качестве аргумента. Как видите, всё очень просто.

:root < --base: #ffc600; --spacing: 10px; --blur: 10px; >img < padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); filter: blur(var(--blur)); >.hl

CSS-переменными можно управлять из JavaScript.

Использование CSS-переменных

→ Вот пример на CodePen, где показано использование CSS-переменных и управление ими из JS-кода

5. Обеспечение поддержки тёмной темы

С тех пор, как компания Apple представила в прошлом году тёмную тему для macOS, и благодаря тому, что CSS дал нам возможность обнаруживать применение этой темы с использованием медиазапроса, многие крупные веб-проекты (например, вроде Twitter и Google Maps) такой темой обзавелись (вот список проектов, которые поддерживают тёмную тему).

Тёмная тема — это не просто способ украшения веб-страниц. Она способна реально помочь некоторым людям работать в интернете.

Вот несколько цитат.

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

Томас Штайнер, Customer Solutions Engineer, Google, Германия.

У Молли — синдром Ушера. Из-за этого она ничего не слышит, а поле зрения одного из её глаз ограничено 5 градусами. (…) Просмотр страниц в тёмном режиме будет ей по силам. Этот режим может пригодиться и другим людям, расширяя возможности по работе в интернете для тех, у кого болит голова, или для тех, кому приходится сидеть за компьютером в плохо освещённой комнате. Если при разработке чего-либо ориентироваться лишь на некоторых особенных пользователей, это окажется полезным далеко не только им.

Чарльз Рейнольдс, дизайнер, правительство Великобритании.

Кроме того, из материала Томаса Штайнера можно узнать о том, что использование тёмной темы способствует экономии энергии: «(…) как известно, использование тёмного режима на AMOLED-дисплеях позволяет сэкономить немало энергии. Исследования в сфере Android-устройств, направленные на популярные приложения Google, вроде YouTube, показали, что в некоторых случаях экономия энергии может достигать 60%».

Новая возможность CSS, которая позволяет нам узнавать о том, включена ли у пользователя тёмная тема, представлена медиа-функцией prefers-color-scheme . Она уже совместима с Chrome, Firefox, Safari и Opera.

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

:root < --color: #222; --background: #eee; --text: 'default'; >body < color: var(--color); background: var(--background); >body:after < content: var(--text); display: block; text-align: center; font-size: 3rem; >@media (prefers-color-scheme: light) < :root < --color: #222; --background: #eee; --text: 'light'; >> @media (prefers-color-scheme: dark) < :root < --color: #eee; --background: #222; --text: 'dark'; >>

Автоматическое обнаружение темы, используемой устройством

→ В данном CodePen-проекте оформление страницы зависит от того, какую тему использует тот, кто просматривает этот пример

6. Директива supports

Долгое время веб-разработчикам приходилось прибегать к сторонним решениям (вроде JS-инструмента Modernizr) для выяснения того, поддерживаются ли некие возможности CSS текущим браузером. Например, настраивая свойство элемента -webkit-line-clamp , можно проверить, поддерживается ли это свойство в браузере, и, если это не так, можно воспользоваться каким-то запасным вариантом.

После того, как в CSS появилась директива @supports , проверять возможности браузеров стало можно прямо из CSS-кода.

Директива @supports очень похожа на медиазапросы. Она поддерживает различные комбинации выражений, построенные с помощью условных операторов AND , OR и NOT :

@supports (-webkit-line-clamp: 2) < .el < . >>

Здесь проверяется, поддерживает ли браузер свойство -webkit-line-clamp . Если это так, то есть, если условие оказывается истинным, будет применён стиль, объявленный внутри директивы @supports .

Эту возможность поддерживают все современные браузеры.

Итоги

В этом материале я рассказал о некоторых полезных возможностях CSS. Если вы можете сделать что-то без использования JS, а лишь применяя CSS, то так и поступите.

Современный мир фронтенда быстро меняется, в нашем распоряжении постоянно появляются новые возможности, помогающие нам быстрее и качественнее делать наше дело. Эксперименты с CSS и изучение нового — это не только очень полезно, но и крайне интересно. Советую вам попробовать то новое, о чём вы сегодня узнали.

А вам известны какие-нибудь свежие возможности CSS, которые позволяют решать те же задачи, которые раньше решали только с использованием JavaScript?

Блог компании RUVDS.com
Веб-разработка
CSS
JavaScript

CSS overflow-y Property

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

Default value:	visible
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.overflowY=»scroll» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -ms-, specify the first version that worked with a prefix.

Property
overflow-y	4.0	9.0 8.0 -ms-	1.5	3.0	9.5

CSS Syntax

Property Values

Value	Description	Demo
visible	The content is not clipped, and it may be rendered outside the content box. This is default	Demo ❯
hidden	The content is clipped — and no scrolling mechanism is provided	Demo ❯
scroll	The content is clipped and a scrolling mechanism is provided	Demo ❯
auto	Should cause a scrolling mechanism to be provided for overflowing boxes	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit