Scroll-snap-stop - CSS Property

Syntax diagram of scroll-snap-stop.

Description of the scroll-snap-stop property.

The `scroll-snap-stop` property in the context of a scroll snap container. It allows you to force the scrolling to stop on specific elements. This is especially useful on touchscreens: users often scroll more than they intend and risk missing important elements, forcing them to go back.

scroll-snap-stop must be applied to the scrolling content elements on which we want to force the stop.

The example below is a partial list of CSS properties, classified by modules. The property scroll-snap-stop allows stopping the scrolling on each of the module titles. The effect will only be truly visible on a terminal with a touchscreen (scrolling by swiping with a finger), or equipped with a notepad. However, the ergonomics are not perfect because it is difficult to scroll long blocks like "CSS Backgrounds and borders module".

Also see the following properties:

Values for scroll-snap-stop.

• scroll-snap-stop: normal;

  When scrolling through the container, some snap point may be skipped.

• scroll-snap-stop: always;

  The elements targeted by the scroll-snap-stop property with the value always will block scrolling.

• scroll-snap-stop: initial; (normal) scroll-snap-stop: inherit; scroll-snap-stop: revert; scroll-snap-stop: revertLayer; scroll-snap-stop: unset;

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

Animation of the scroll-snap-stop property.

The property scroll-snap-stop can be animated. But since its effect is only visible when scrolling the content, the visual rendering of the animation is nonexistent.

Access the scroll-snap-stop property via a program

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

In JavaScript, here is how to modify the value of scroll-snap-stop. Two syntax examples are given: the first with a typical CSS notation, in kebab-case, and the second with JavaScript notation, in camel-case.

let el = document.getElementById('id'); el.style['scroll-snap-stop'] = 'always'; // or let el = document.getElementById('id'); el.style.scrollSnapStop = 'always';

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

When the property has been applied to the element itself via its style attribute, the code below retrieves its value, but not if it has been set through a CSS selector.

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

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

The computed value is the one that results from the value assigned to the element, and from the possible consideration of inherited values. Failing that, it will be the initial value of the property: normal in the case of scroll-snap-stop.

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

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

JQuery also offers syntaxes for manipulating the property scroll-snap-stop. They are shorter than those of Javascript.


$('#id').css('scroll-snap-stop', 'always');
// or
$('#id').css('scrollSnapStop', 'always');


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

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

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS. All of this code deals with the manipulation of CSS styles with Javascript or JQuery.

Test it yourself.

The buttons below apply the entered value to the property scroll-snap-stop and then display either the value as it was applied or the computed value. In the case of scroll-snap-stop, there will be no difference between these two values since the property only accepts predefined values. However, if you try to assign a non-existent value, the first value will be empty, while the second will be the initial value.

Simulator.

Let us recall that the effect of the property scroll-snap-stop is hardly noticeable, even invisible, when scrolling is done with a mouse. Use a terminal with a touchscreen that allows scrolling the content with your finger.

Browsers compatibility with scroll-snap-stop.

The compatibility of current browsers with scroll-snap-stop is correct. There are still some issues with marginal or obsolete browsers.

1

Scroll Snap

2

scroll-snap-stop
property

Estimated overall support.

96%

94%

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-stop 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-stop. First introduction to the scroll-snap-stop property.
  

  March 26, 2015

  Working Draft.

  

  October 20, 2016

  Candidate Recommendation.

  

  

See also, regarding scrolling with snapping.

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

Properties: