Css sticky overflow scroll

Проблемы с position: sticky CSS и способ их решить

От автора: в этой статье я хочу рассмотреть недостатки position: sticky; — в частности, как мы можем придумать креативную технику при работе с переполнениями, что вызывает разочарование при работе с нативным решением.

Липкие элементы или фиксированные панели часто используются в программах — особенно в приложениях на основе строк / столбцов, таких как Microsoft Excel. CSS position: sticky также широко используется в мобильных (нативных) приложениях и в веб-дизайне. Такие элементы помогают пользователям сохранять чувство перспективы при сортировке длинных списков или отслеживании деталей своих заказов при совершении покупок в Интернете.

Старый способ

Указать элементу, чтобы он вел себя липко и статично в окне браузера, было довольно сложно. До того, как (современные) браузеры представили нативное решение, нам приходилось прибегать к имитации поведения с помощью привязки (например, для заголовков, боковых панелей и т. д.) через javascript и position: fixed;. Javascript прослушивает события прокрутки и положение элемента в документе, и как только добавляется математика, вы вводите класс, скажем, «sticky», который назначает элементу position: fixed;, что приводит к тому, что элемент прилипание в соответствии с вашими инструкциями.

Довольно сложная техника для чего-то (что должно быть) достаточно простого. Этот метод имеет несколько (отчасти) очевидных ошибок:

элемент не расположен в потоке документа, что вызывает скачок, когда он становится в статическую позицию, и

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

потенциальное снижение производительности в результате непрерывных перерисовок и обратных вызовов из-за события прокрутки (вы могли бы справиться с проблемами производительности, используя такие методы, как дросселирование, отскок или даже Intersection Observer.

Способ sticky

Удобство этого метода заключается в том, что браузер делает всю тяжелую работу за вас. Элемент беспрепятственно участвует в потоке документа, а также фиксируется в окне, когда вы прокручиваете страницу, не вызывая внезапного скачка.

Вы можете сделать это с помощью четырех строк кода:

Просто! Однако могут возникнуть трудности — особенно если мы введем переполнения.

Проблемы с переполнением

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

Тем не менее, при работе с переполнениями вы можете обнаружить, что липкий блок не такой уж липкий, что может вызвать некоторое разочарование. Браузер, похоже, не принимает в расчет position: sticky;, когда мы добавляем overflow.

Проблема с переполнением заключается в том… что липкий элемент «прилипает» к своему прямому родительскому элементу, который имеет «механизм прокрутки» (создаваемый, когда для overflow задано hidden, scroll, auto или overlay), даже если этот предок не является фактически прокручиваемым элементом. Это подавляет любое «липкое» поведение. (Из MDN Web Docs)

Такое поведение воспроизведено в этом коде от Валттери Лайтинен:

Это именно то, что нам нужно, но заголовки не прилипают, когда мы вертикально прокручиваем таблицу. Если родительский контейнер имеет свойство overflow, у нас возникают проблемы. Как только вы удалите overflow, заголовки встанут, как нужно (попробуйте установить флажок). Так как мы можем справиться с этим?

Добавить фиксированную высоту

Покопавшись в Интернете, я нашел полезное предложение: указать высоту в нашем контейнере с переполняющим размеры содержимым. В этой упрощенной версии мы установили фиксированную высоту для контейнера:

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

Предлагаемое решение

Прежде всего, давайте отделим заголовки от таблицы. Мы сделаем, чтобы заголовки содержались в собственном div («headers»), чтобы мы могли работать с ними отдельно. Давайте назначим для этого div position: sticky; , и давайте добавим внутри него еще один div «scroller», чтобы контент мог прокручиваться горизонтально.

Источник

Combining position: sticky; with overflow: scroll;

Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.

When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.

The solution is to use two scroll containers and sync up their scrolling position using a tad of JavaScript:

Let’s hope this quirky combination gets fixed in CSS itself. Until then we’ll need this JS-based solution.

❓ Not familiar with position: sticky; ? Check out this introduction then.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Join the Conversation

Nice post! Thanks for sharing. Some friendly feedback: in the post is not mentioned the syncscroll.js library and when someone get to the CodePen demo they could avoid noticing that is being loaded because the need to go to the config modal and to the JavaScript tab to see that the syncscroll.js library is being loaded. Thanks!

Leave a comment

Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About Bram.us

Bram.us is the technical/geeky weblog of Bramus Van Damme, a Freelance Web Developer from Belgium.

Main topics are web related technologies (CSS, JS, PHP, …), along with other geeky things (robots, space, …) and personal interests (cartography, music, movies, …).

Stay up-to-date

Next to his ramblings here, you may also follow @bramus himself on Twitter or on Mastodon.

Источник

position : sticky

Уникальное позиционирование, которое создаёт липкий элемент.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент с position : sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Скопировать ссылку «Пример» Скопировано

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из :

 h1  position: sticky; top: 15px;> .squares__item:last-of-type  position: sticky; bottom: 15px;> h1  position: sticky; top: 15px; > .squares__item:last-of-type  position: sticky; bottom: 15px; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Блоки с «липким» позиционированием ведут себя как position : relative и position : fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position : fixed . А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position : relative .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .block  position: sticky; top: 15px;> .block  position: sticky; top: 15px; >    Скопировать Скопировано Не удалось скопировать   

Для блока, который должен быть «липко» позиционирован, указываем position : sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

💡 При вертикальном скролле работают только свойства top и bottom , при горизонтальном — left и right . Или их логические аналоги inset .

💡 position : sticky можно указать внутри родителя с overflow : scroll или overflow : auto .

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

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body , то, указав шапке position : sticky , мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.

Источник