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.

Author: LeopoldTal

src/core/event/scroll.js

@@ -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) {