🩹 Prevent page scroll when Up/Down arrow is pressed

satnaing · Oct 22, 2022 · 9317952 · 9317952
1 parent 6a0bfb9
commit 9317952
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,6 +13,18 @@ function App() {
   const { theme, themeLoaded, setMode } = useTheme();
   const [selectedTheme, setSelectedTheme] = useState(theme);
 
+  // Disable browser's default behavior
+  // to prevent the page go up when Up Arrow is pressed
+  useEffect(() => {
+    window.addEventListener(
+      "keydown",
+      e => {
+        ["ArrowUp", "ArrowDown"].indexOf(e.code) > -1 && e.preventDefault();
+      },
+      false
+    );
+  }, []);
+
   useEffect(() => {
     setSelectedTheme(theme);
   }, [themeLoaded]);