From e603f087b0e9c3f5370426efdfce219c7bd976b9 Mon Sep 17 00:00:00 2001 From: charyung Date: Sun, 5 Sep 2021 23:29:38 -0400 Subject: [PATCH 1/3] Make scrolling by page on scroll (but it's kinda buggy rn) --- src/components/nav.js | 2 +- src/components/scroll.js | 49 ++++++++++++++++++++++++++++++++++++++++ src/pages/index.js | 9 ++++++-- src/sections/splash.js | 2 +- 4 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 src/components/scroll.js diff --git a/src/components/nav.js b/src/components/nav.js index d8bb287..6df3960 100644 --- a/src/components/nav.js +++ b/src/components/nav.js @@ -42,7 +42,7 @@ export default function Nav() { const logoRef = useRef(); useEffect(() => { const throttled = throttle(() => logoRef.current.rotate(window.scrollY), 200, { trailing: true }); - window.addEventListener("scroll", throttled); + window.addEventListener("scroll", throttled, { passive: true }); return () => window.removeEventListener("scroll", throttled); }, []); diff --git a/src/components/scroll.js b/src/components/scroll.js new file mode 100644 index 0000000..e4d583a --- /dev/null +++ b/src/components/scroll.js @@ -0,0 +1,49 @@ +import React, { useEffect } from "react"; +import { throttle } from "lodash"; + +const scrollScreen = isScrolledDown => { + const scrollMod = isScrolledDown ? 1 : -1; + window.scrollBy(0, window.innerHeight * scrollMod); + scrollY = window.scrollY; +}; + +const scrollScreenWheel = throttle(e => { + if (e.deltaY === 0) return; + scrollScreen(e.deltaY > 0); +}, 200, { trailing: false }); + +let scrollY; + +const screenSwipeStart = throttle(e => { + scrollY = e.touches[0].clientY; +}, 200); + +const screenSwipeMove = throttle(e => { + if (!scrollY) return; + + const currY = e.touches[0].clientY; + if (currY - scrollY === 0) return; + scrollScreen(currY > scrollY); + scrollY = null; + + e.preventDefault(); +}, 200); + + +export default function Scroll() { + useEffect(() => { + scrollY = window.scrollY; + + window.addEventListener("wheel", scrollScreenWheel, { passive: true }); + window.addEventListener("touchstart", screenSwipeStart, { passive: true }); + window.addEventListener("touchmove", screenSwipeMove, { passive: true }); + + return () => { + window.removeEventListener("scroll", scrollScreenWheel, 200, { trailing: false }); + window.removeEventListener("touchstart", screenSwipeStart); + window.removeEventListener("touchmove", screenSwipeMove); + }; + }, []); + + return null; +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 029f871..dde0c47 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,8 +1,9 @@ import React from "react"; import Head from "next/head"; -import Nav from "../components/nav"; -import Cursor from "../components/cursor"; +import Nav from "components/nav"; +import Cursor from "components/cursor"; +import Scroll from "components/scroll"; import Descriptions from "sections/descriptions"; import Splash from "sections/splash"; @@ -17,12 +18,16 @@ export default function Home() { +
+ + +
); diff --git a/src/sections/splash.js b/src/sections/splash.js index 36dec62..c413a50 100644 --- a/src/sections/splash.js +++ b/src/sections/splash.js @@ -13,7 +13,7 @@ const Title = styled.div` } `; -const Header = styled.main` +const Header = styled.header` ${tw`h-screen flex flex-col justify-center`} width: 80vw; `; From 044863faffef3aaef7a586514ed6de7f7be3e571 Mon Sep 17 00:00:00 2001 From: charyung Date: Mon, 6 Sep 2021 13:22:18 -0400 Subject: [PATCH 2/3] Add the top and bottom parts of the screen to scroll, plus some minor changes --- src/components/scroll.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/scroll.js b/src/components/scroll.js index e4d583a..5ebf5ce 100644 --- a/src/components/scroll.js +++ b/src/components/scroll.js @@ -3,14 +3,14 @@ import { throttle } from "lodash"; const scrollScreen = isScrolledDown => { const scrollMod = isScrolledDown ? 1 : -1; - window.scrollBy(0, window.innerHeight * scrollMod); - scrollY = window.scrollY; + window.scrollTo(0, window.scrollY + window.innerHeight * scrollMod); }; const scrollScreenWheel = throttle(e => { if (e.deltaY === 0) return; + e.preventDefault(); scrollScreen(e.deltaY > 0); -}, 200, { trailing: false }); +}, 200, { trailing: true }); let scrollY; @@ -32,18 +32,27 @@ const screenSwipeMove = throttle(e => { export default function Scroll() { useEffect(() => { - scrollY = window.scrollY; - - window.addEventListener("wheel", scrollScreenWheel, { passive: true }); + window.addEventListener("wheel", scrollScreenWheel); window.addEventListener("touchstart", screenSwipeStart, { passive: true }); window.addEventListener("touchmove", screenSwipeMove, { passive: true }); return () => { - window.removeEventListener("scroll", scrollScreenWheel, 200, { trailing: false }); + window.removeEventListener("wheel", scrollScreenWheel); window.removeEventListener("touchstart", screenSwipeStart); window.removeEventListener("touchmove", screenSwipeMove); }; }, []); - return null; + return ( +
+
scrollScreen(false)} + >
+
scrollScreen(true)} + >
+
+ ); } \ No newline at end of file From c705995d9bfd8aa6e69ffc7a14379fca1824054e Mon Sep 17 00:00:00 2001 From: charyung Date: Sat, 11 Sep 2021 21:05:27 -0400 Subject: [PATCH 3/3] trying things I guess --- src/components/scroll.js | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/scroll.js b/src/components/scroll.js index 5ebf5ce..08b0343 100644 --- a/src/components/scroll.js +++ b/src/components/scroll.js @@ -1,16 +1,26 @@ import React, { useEffect } from "react"; import { throttle } from "lodash"; -const scrollScreen = isScrolledDown => { +let currScreen = 0; +const minScreen = 0; +const maxScreen = 4; // todo: unhardcode? + +const scrollScreen = throttle(isScrolledDown => { const scrollMod = isScrolledDown ? 1 : -1; - window.scrollTo(0, window.scrollY + window.innerHeight * scrollMod); -}; -const scrollScreenWheel = throttle(e => { - if (e.deltaY === 0) return; + console.log(currScreen + scrollMod); + if (currScreen + scrollMod < minScreen || currScreen + scrollMod > maxScreen) return; + + console.log((currScreen + scrollMod) * window.innerHeight); + window.scrollTo(0, (currScreen + scrollMod) * window.innerHeight); + currScreen += scrollMod; +}, 1500, { leading: true, trailing: false }); + +const scrollScreenWheel = e => { e.preventDefault(); + if (e.deltaY === 0) return; scrollScreen(e.deltaY > 0); -}, 200, { trailing: true }); +}; let scrollY; @@ -32,9 +42,9 @@ const screenSwipeMove = throttle(e => { export default function Scroll() { useEffect(() => { - window.addEventListener("wheel", scrollScreenWheel); - window.addEventListener("touchstart", screenSwipeStart, { passive: true }); - window.addEventListener("touchmove", screenSwipeMove, { passive: true }); + window.addEventListener("wheel", scrollScreenWheel, { passive: false }); + window.addEventListener("touchstart", screenSwipeStart); + window.addEventListener("touchmove", screenSwipeMove); return () => { window.removeEventListener("wheel", scrollScreenWheel); @@ -45,14 +55,14 @@ export default function Scroll() { return (
-
scrollScreen(false)} >
scrollScreen(true)} - >
+ >
*/} ); } \ No newline at end of file