Disable Scroll (#10)

John Richard Chipps-Harding · web-flow · commit cb00259a242d · 2022-10-12T21:04:27.000+01:00
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ You can configure a few things by editing the file `src/config/index.tsx`.
 - `FILE_EXTENSION` - The filetypes supported. Default `png`.
 - `FILE_MIME` - The file mime type. Default `image/png`.
 - `SHOW_TITLE` - If the title should be overlaid. Default `false`.
+- `DISABLE_SCROLL` - Should the user be able to scroll? Default `true`.
 - `STACK_TRANSFORM` - How the stack should be positioned on the page. Default shown below.
 
 ```ts
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -5,6 +5,7 @@ export const RETRY_INTERVAL = 10 * 1000;
 export const FILE_EXTENSION = "png";
 export const FILE_MIME = "image/png";
 export const SHOW_TITLE = false;
+export const DISABLE_SCROLL = true;
 
 export const STACK_TRANSFORM = {
   x: "100%",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,11 +1,11 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { useFullscreen } from "rooks";
 import Head from "next/head";
 import type { NextPage } from "next";
 
 import useImages from "@/hooks/useImages";
-import { STACK_TRANSFORM } from "@/config";
+import { DISABLE_SCROLL, STACK_TRANSFORM } from "@/config";
 import { Positioner } from "@/components/Positioner";
 import { ImageStack } from "@/components/ImageStack";
 
@@ -15,6 +15,16 @@ const Home: NextPage = () => {
   const { toggleFullscreen } = useFullscreen({
     target: fullscreenContainerRef,
   });
+
+  useEffect(() => {
+    if (!DISABLE_SCROLL) return;
+    const old = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = old;
+    };
+  }, []);
+
   return (
     <>
       <Head>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  overflow: hidden;
 }
 
 body:fullscreen {

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@ html,`
`2`	`2`	`body {`
`3`	`3`	`padding: 0;`
`4`	`4`	`margin: 0;`
`5`		`- overflow: hidden;`
`6`	`5`	`}`
`7`	`6`
`8`	`7`	`body:fullscreen {`