Skip to content

Commit

Permalink
fix: Scroll instantly when the user prefers reduced motion
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
LeopoldTal committed Dec 12, 2022
1 parent f4cae7f commit ca2b750
Showing 1 changed file with 24 additions and 9 deletions.
33 changes: 24 additions & 9 deletions src/core/event/scroll.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,33 @@ function scrollTo(el, offset = 0) {
}

enableScrollEvent = false;
scroller = new Tweezer({
start: window.pageYOffset,
end:
Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset,
duration: 500,
})
.on('tick', v => window.scrollTo(0, v))
.on('done', () => {
const scrollEnd =
Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset;
const reduceMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;

if (reduceMotion) {
// User wants reduced motion: scroll instantly
setTimeout(() => {
window.scrollTo(0, scrollEnd);
enableScrollEvent = true;
scroller = null;
});
} else {
// Scroll smoothly
scroller = new Tweezer({
start: window.pageYOffset,
end: scrollEnd,
duration: 500,
})
.begin();
.on('tick', v => window.scrollTo(0, v))
.on('done', () => {
enableScrollEvent = true;
scroller = null;
})
.begin();
}
}

function highlight(path) {
Expand Down

0 comments on commit ca2b750

Please sign in to comment.