funky gallery scroll - gone!

Author: tobyab

components/slack/project.js

@@ -16,7 +16,7 @@ export default function Project({ title, description, color, img, itemId }) {
           `linear-gradient(to bottom, ${color[0]}, ${color[1]})`,
         color: 'white',
         overflow: 'clip',
-        width: ['100vw', '50rem', '70rem'],
+        width: ['100vw', '40rem', '50rem', '70rem'],
         height: ['25rem', '40rem'],
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',

pages/slack.js

@@ -1,7 +1,7 @@
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
 import { Box, Container, Heading, Text } from 'theme-ui'
-import { useRef, useState, useEffect, useCallback } from 'react'
+import { useRef } from 'react'
 import { ScrollMenu } from 'react-horizontal-scrolling-menu'
 import 'react-horizontal-scrolling-menu/dist/styles.css'
 
@@ -83,12 +83,8 @@ const SlackPage = () => {
           paddingT: '1rem'
         }}
       >
-        <Box>
-          <ScrollMenu
-            Footer={Arrows}
-            onWheel={onWheel}
-            style={{ scrollbar: 'hidden' }}
-          >
+        <Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
+          <ScrollMenu Footer={Arrows} style={{ scrollbar: 'hidden' }}>
             {projects.map(project => (
               <Project
                 title={project.title}
@@ -133,19 +129,12 @@ const SlackPage = () => {
   )
 }
 
-function onWheel(apiObj, ev) {
-  const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15
-
-  if (isThouchpad) {
-    ev.stopPropagation()
-    return
-  }
+function disableScroll() {
+  document.body.style.overflowAnchor = 'hidden'
+}
 
-  if (ev.deltaY < 0) {
-    apiObj.scrollNext()
-  } else if (ev.deltaY > 0) {
-    apiObj.scrollPrev()
-  }
+function enableScroll() {
+  document.body.style.overflowAnchor = 'scroll'
 }
 
 export default SlackPage