Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ca2b750

Browse files
fix: Scroll instantly when the user prefers reduced motion
Smooth scrolling can trigger seasickness for some users. The [`prefers-reduced-motion` media query](https://css-tricks.com/introduction-reduced-motion-media-query/) allows these users to specify an accessibility setting for less animation, e.g. instant scrolling.
1 parent f4cae7f commit ca2b750

File tree

1 file changed

+24
-9
lines changed

1 file changed

+24
-9
lines changed

‎src/core/event/scroll.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,33 @@ function scrollTo(el, offset = 0) {
1616
}
1717

1818
enableScrollEvent = false;
19-
scroller = new Tweezer({
20-
start: window.pageYOffset,
21-
end:
22-
Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset,
23-
duration: 500,
24-
})
25-
.on('tick', v => window.scrollTo(0, v))
26-
.on('done', () => {
19+
const scrollEnd =
20+
Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset;
21+
const reduceMotion = window.matchMedia(
22+
'(prefers-reduced-motion: reduce)'
23+
).matches;
24+
25+
if (reduceMotion) {
26+
// User wants reduced motion: scroll instantly
27+
setTimeout(() => {
28+
window.scrollTo(0, scrollEnd);
2729
enableScrollEvent = true;
2830
scroller = null;
31+
});
32+
} else {
33+
// Scroll smoothly
34+
scroller = new Tweezer({
35+
start: window.pageYOffset,
36+
end: scrollEnd,
37+
duration: 500,
2938
})
30-
.begin();
39+
.on('tick', v => window.scrollTo(0, v))
40+
.on('done', () => {
41+
enableScrollEvent = true;
42+
scroller = null;
43+
})
44+
.begin();
45+
}
3146
}
3247

3348
function highlight(path) {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /