feat(home): prevent vertical scroll while sliding shelf

jwplayer · Jun 24, 2021 · 10b2c45 · 10b2c45
1 parent 5ff99e1
commit 10b2c45
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -113,11 +113,29 @@ const TileDock = <T extends unknown>({
     if (!animated) setDoAnimationReset(true);
   };
 
-  const handleTouchStart = (event: React.TouchEvent): void =>
+  const handleTouchStart = (event: React.TouchEvent): void => {
     setTouchPosition({
       x: event.touches[0].clientX,
       y: event.touches[0].clientY,
     });
+  };
+
+  const [verticalScrollStopped, setVerticalScrollStopped] = useState<boolean>(false);
+
+  const handleTouchMove = (event: React.TouchEvent): void => {
+    if (verticalScrollStopped) return;
+
+    const newPosition = {
+      x: event.changedTouches[0].clientX,
+      y: event.changedTouches[0].clientY,
+    };
+    const movementX: number = Math.abs(newPosition.x - touchPosition.x);
+    const movementY: number = Math.abs(newPosition.y - touchPosition.y);
+    if (movementX > movementY && movementX > 10) {
+      setVerticalScrollStopped(true);
+      document.body.style.overflowY = 'hidden';
+    }
+  };
   const handleTouchEnd = (event: React.TouchEvent): void => {
     const newPosition = {
       x: event.changedTouches[0].clientX,
@@ -127,6 +145,8 @@ const TileDock = <T extends unknown>({
     const movementY: number = Math.abs(newPosition.y - touchPosition.y);
     const direction: Direction = newPosition.x < touchPosition.x ? 'right' : 'left';
 
+    setVerticalScrollStopped(false);
+    document.body.style.overflowY = '';
     if (movementX > minimalTouchMovement && movementX > movementY) {
       slide(direction);
     }
@@ -175,7 +195,14 @@ const TileDock = <T extends unknown>({
   return (
     <div className={styles.tileDock}>
       {showLeftControl && !!renderLeftControl && <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>}
-      <ul ref={frameRef} style={ulStyle} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} onTransitionEnd={handleTransitionEnd}>
+      <ul
+        ref={frameRef}
+        style={ulStyle}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchMove={handleTouchMove}
+        onTransitionEnd={handleTransitionEnd}
+      >
         {wrapWithEmptyTiles ? (
           <li
             className={styles.emptyTile}