Scroll-snap-type - CSS Property

Syntax diagram of scroll-snap-type.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• The asterisk indicates a value that can be omitted (default value).

Description of the scroll-snap-type property.

The property scroll-snap-type defines a scrolling with snapping, and more precisely, the scroll direction (horizontal or vertical) and the type of snapping.

Refer to this mini tutorial for a general overview of scrolling with snapping : scrolling with snaps.

Also see the following properties:

Values for scroll-snap-type.

• scroll-snap-type: none;

  Default value. The container, if it is a scrolling container, offers standard scrolling, without snap points.

• scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: inline; scroll-snap-type: block; scroll-snap-type: both;

  These values define in which direction scrolling with snapping is enabled. x and y are absolute values, independent of the writing mode, whereas block and inline are dependent on the writing mode.

  • x: horizontal direction, regardless of the writing mode.
  • y: vertical direction, regardless of the writing mode.
  • inline: in the direction of the lines, that is to say horizontally for Latin languages, and vertically for CJK languages.
  • block: in the direction of the blocks, that is to say vertically for Latin languages, and horizontally for CJK languages.
  • both: Scrolling with snapping is enabled in both directions.

  These values have no effect if the container is not scrollable (see the overflow property).

• scroll-snap-type: y proximity;

  The proximity value indicates that scrolling will stop at the nearest snap point. However, if the snap point is too far away, scrolling is not adjusted to the snap point. This is the most common option. In fact, you can omit specifying proximity.

  See the example below to compare with the value mandatory.

• scroll-snap-type: y mandatory;

  Scrolling must necessarily be adjusted to the nearest snap point. However, the last element may escape this rule if it is larger or smaller than the viewing window. If no snap point exists in the content, scrolling is not adjusted.

  To clearly observe the difference in results between the proximity and mandatory values, scroll through the containers below by turning the mouse wheel just one notch.

  1

  2

  3

  4

  5

  
  
  
  
  
  
   

  scroll-snap-type: y proximity;

  1

  2

  3

  4

  5

  
  
  
  
  
  
   

  scroll-snap-type: y mandatory;

• scroll-snap-type: initial; (none) scroll-snap-type: inherit; scroll-snap-type: revert; scroll-snap-type: revertLayer; scroll-snap-type: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

What is Scroll Snap?

When the content of an element exceeds its dimensions, it is customary to make this element scrollable. The reader can display the part of the content they want by using the scroll bars or the mouse wheel on a desktop computer, or by sliding their finger on a touch device. This scrolling is most often vertical, but it can also be horizontal, or in both directions.

But this scrolling is not related to the content: it often happens that an element is partially displayed at the top of the viewing window. This can be inconvenient, for example, if it is a series of photos displayed one after the other. Scrolling with snapping involves defining snap points in the content to stop scrolling at relevant places.

Below, the first list of images offers a classic scrolling. The images have different heights. The user must control the scrolling themselves so that an image is fully displayed at the top of the list.
The second element uses the Scroll Snap technique: the mouse wheel or a click on the scrollbar track displays the next or previous image by snapping it exactly to the top of the list. Scrolling first occurs by the requested amount, then the system adjusts it to align one of the snap points at the start of the viewport. If no snap point is nearby, this adjustment may not be made.

 

Classic scrolling

 

Scroll Snap

Animation of the scroll-snap-type property.

The property scroll-snap-type can be animated. Its values being non-numeric, the property jumps abruptly from one value to another. But animating scroll-snap-type is of little interest, and does not produce any visible visual effect.

Access the scroll-snap-type property via a program

With Javascript, change the value of scroll-snap-type.

The two JavaScript codes below modify the value of the property scroll-snap-type for the element whose ID is specified. Two syntaxes are possible: the first with the kebab-case notation, typical of CSS, and the other with the camel-case notation.

let el = document.getElementById('id'); el.style['scroll-snap-type'] = 'block proximity'; // or let el = document.getElementById('id'); el.style.scrollSnapType = 'block proximity';

With Javascript, read the value of scroll-snap-type.

The code below retrieves the value of the property scroll-snap-type if it has been assigned directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['scroll-snap-type']; // or let el = document.getElementById('id'); let value = el.style.scrollSnapType;

With Javascript, read the computed value of scroll-snap-type.

The computed value is the one that results from the cascade of inheritances. If the property scroll-snap-type has been defined neither on the element nor on any of its parents, then the computed value is the initial value: none in the case of scroll-snap-type.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('scroll-snap-type');

With JQuery, change the value of scroll-snap-type.


$('#id').css('scroll-snap-type', 'block proximity');
// or
$('#id').css('scrollSnapType', 'block proximity');


With JQuery, read the computed value of scroll-snap-type.

let value = $('#id').css('scroll-snap-type');

Test yourself.

The buttons below apply the entered value to the scroll-snap-type property and then display either the value as it was applied or the computed value, which will make no difference in the case of scroll-snap-type. However, if you try to assign an incorrect value, the assigned value will be empty and the calculated value will be none (initial value).
A particularity in the case of scroll-snap-type: the value proximity being a default value, it is not stored.

Browsers compatibility with scroll-snap-type.

The support for scroll-snap-type is good, except on Internet Explorer, but this browser is not used anymore.

1

Scroll Snap

2

scroll-snap-type
property

Estimated overall support.

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the scroll-snap-type property.

• CSS Scroll Snap Module - Level 1

  This specification module defines the features regarding scrolling with snap positions. In other words, content-aligned scrolling, to prevent, for example, an image from being cut off at the top or bottom of its container.

  Regarding scroll-snap-type. Introducing the scroll-snap-type property.
  

  March 26, 2015

  Working Draft.

  

  October 20, 2016

  Candidate Recommendation.

  

  

See also, regarding scrolling with snapping.

Scrolling with snapping is described in the module CSS Scroll Snap Module. The property scroll-snap-type and all those related to the subject are also present in this module.

Properties: