Interactions

JavaScript is a handy instrument, but writing hundreds of lines of code just to emulate something that should be handled by the browser can sometimes feel like trying to swat flies with a sledgehammer.

Thanfully CSS is catching up, and properties like CSS Scroll Snap give you more control over the browser's behavior, without having to write a single line of JavaScript.

The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.

Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.

The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience
overall
<1
1~2
2~5
5~10
10~20
>20
overscroll-behavior
18.84%
12.33%
21.21%
20.64%
19.58%
19.55%
19.76%
Scroll Snap
11.27%
7.93%
7.73%
10.13%
11.27%
14.1%
16.47%
overflow-anchor
7.63%
7.49%
10.87%
9%
6.32%
5.74%
6.35%
Difference from overall usage:
-20%-10%0+10%+20%

Scroll Snap

Completion Percentage: 99.28% (11236)
Completion Percentage: 99.28% (11236)
Percents%CountΣ
Have used it11.56%
Know what it is, but haven't used it40.21%
Never heard of it/Not sure what it is47.52%

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

overscroll-behavior

Completion Percentage: 99.2% (11227)
Completion Percentage: 99.2% (11227)
Percents%CountΣ
Have used it19.8%
Know what it is, but haven't used it21.75%
Never heard of it/Not sure what it is57.66%

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.

overflow-anchor

Completion Percentage: 99.31% (11239)
Completion Percentage: 99.31% (11239)
Percents%CountΣ
Have used it7.25%
Know what it is, but haven't used it14.54%
Never heard of it/Not sure what it is77.51%

The overflow-anchor CSS property provides a way to opt out browser scroll anchoring behavior, which adjusts scroll position to minimize content shifts.