Css scroll to center

Базовые концепции CSS Scroll Snap

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

Основы Scroll Snap

Ключевыми свойствами спецификации Scroll Snap являются scroll-snap-type и scroll-snap-align (en-US). Свойство scroll-snap-type применяется к скролл-контейнеру для определения типа и направления прокрутки.

Свойство scroll-snap-align нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси y , а свойство scroll-snap-align применяется для элемента «section», чтобы задать точку, на которой прокрутка должна остановиться.

Свойство scroll-snap-type

Свойство scroll-snap-type необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть x , y , или соответствующие логические block или inline . Также можно использовать ключевое слово both , чтобы привязка работала в обоих направлениях.

Также можно передавать ключевые слова mandatory , или proximity . Ключевое слово mandatory определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово proximity означает, что привязка может произойти , но не обязательно.

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

При значении proximity привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с mandatory на proximity , чтобы увидеть, как это влияет на работу прокрутки.

Свойство scroll-snap-align

Свойство scroll-snap-align (en-US) может принимать значения start , end , или center , обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение scroll-snap-align , чтобы увидеть, как это повлияет на работу прокрутки.

Внутренний отступ контейнера

Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством scroll-padding (en-US) или альтернативными ему более конкретными свойствами scroll-padding-* , чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.

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

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

Внешние отступы дочерних элементов

Свойство scroll-margin (en-US) может быть задано для дочерних элементов и определяет, по сути, внешний отступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством scroll-padding для родителя. Опробуйте его в примере ниже

Свойство scroll-snap-stop

Свойство scroll-snap-stop (en-US) сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

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

Примечание: на данный момент свойство scroll-snap-stop помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.

Поддержка браузерами

На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. Читайте следующее руководство (en-US) , чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.

Found a content problem with this page?

This page was last modified on 30 мая 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

scroll-snap-align

The scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.

Try it

Syntax

/* Keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /* Global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: revert; scroll-snap-align: revert-layer; scroll-snap-align: unset; 

Values

The box does not define a snap position in that axis.

The start alignment of this box’s scroll snap area, within the scroll container’s snapport is a snap position in this axis.

The end alignment of this box’s scroll snap area, within the scroll container’s snapport is a snap position in this axis.

The center alignment of this box’s scroll snap area, within the scroll container’s snapport is a snap position in this axis.

Formal definition

Formal syntax

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Scroll an element into the center of the viewport

Say your page displays a list of names and you want a certain person to be highlighted and scrolled into view. There’s a browser API for that: Element.scrollIntoView() , which scrolls an element into view.

Element.scrollIntoView() can take two types of elements: a boolean or an object. The object argument gives developers more control over how elements ‘in view’ are aligned, but has slightly less browser support. Let’s look at what we can do with both.

The boolean argument

Say, you have a couple of people in a list:

If you want Julie to be scrolled into view, find the relevant element, then call scrollIntoView() :

const julie = document.getElementById('julie'); julie.scrollIntoView(); 

This scrolls the element into view. With a boolean argument, you can have some control over alignment. If you pass true (default), the browser will scroll so that the element is at the top of your viewport or other scrollable element. With false , it scrolls so the element is at the bottom of the viewport:

julie.scrollIntoView(true) // align top julie.scrollIntoView(false) // align bottom 

Note that the underlying terminology is not ‘top’ or ‘bottom‘, I’ll get into that in the next section.

For most use cases, this boolean argument may be all you need. It lets you choose if you want the element to align top or bottom.

This isn’t always ideal, sometimes you may have a sticky header, so scrollling an element to the top of the document would not actually get it into view. If something like that is the case in your project, the object argument comes in handy. It gives more control over alignment and allows for smooth scroll.

The object argument

In the latest version, you can also pass Element.scrollIntoView() an object, which lets you set two things:

• should it scroll smoothly or jump instantly?
• how should the element align along the block and inline axes?

Smooth scroll

With the behavior parameter, you can set whether scrolling should be instant, so the page just jumps to the element, or smoothly, over a number of seconds (to be decided by the browser).

Unsurprisingly, the «smooth» value triggers smooth scroll. The «auto» value triggers instant scroll, as long as the element’s computed value for the scroll-behavior in CSS is not «smooth» .

Alignment

Where I’ve been saying ‘top’ and ‘bottom’, I should have said ‘start‘ or ‘end’. They are the logical properties that you might recognise from other recent CSS specs like Grid Layout and flexbox.

As a quick reminder, the inline direction is the direction in which your text runs: it is the direction in which the words of this article are added. The block direction is the opposite of that, it is where block level elements are stacked, or where paragraphs of this text are added.

In a page with a vertical scrollbar, on the block axis, start means top, end means bottom. That’s the case on this page, for instance. But if your page uses vertical writing mode, you’d scroll horizontally, like in Hui-Jing Chen’s example of Chinese typography; in those cases, start means right, end means left on the block axis.

Fallbacks can be tricky

All browsers that understand element.scrollIntoView() accept the boolean argument. But only some accept the object argument. The good thing is, browsers will fallback for you. The default for the boolean argument is true , which sets the equivalent to block: start . If you use the object argument to use block: center or block: end , browsers that don’t do the object argument, will regard the argument to be true (because objects are truthy). So you’ll end up with block: start in those browsers. That’s often great, except when it is the opposite of what you’re fallbacking for.

If your interface requires precisely control over scroll alignment, fallbacks can be tricky. As an alternative you can also roll your own alignment with element.scrollTo() , as Jan Hoogeveen pointed out (thanks Jan!). If you end up going for that, I would recommend using coordinates as an argument, as the object argument does not work in some recent browsers, including Edge. See also window.scrollTo on MDN.

In the works: scroll snap

If you find scrollIntoView interesting, you may be interested in Scroll Snap, too. This is new CSS, currently being worked on, which lets you define things like a padding for the scroll container. Rachel Andrew has written a guide on the basic concepts of Scroll Snap on MDN. Some of the properties are already available in some browsers.

Hidde de Vries (@hdv@front-end.social) is a web enthusiast and accessibility specialist from Rotterdam (The Netherlands). He currently works with the NL Design System team and is a participant in the Open UI Community Group. Previously, he worked for W3C (WAI), Mozilla, the Dutch government and others as a freelancer. Hidde spoke at 56 events, most recently in Amsterdam, Netherlands.

Comments, likes & shares (2)

© 2007–2023 Hidde de Vries (@hdv@front-end.social). This website does not collect your data. No language models were involved in writing the blog posts on here.

Источник