fix: carousel: only handle wheel event when not using touchpad

src/components/Carousel/Carousel.tsx

@@ -17,6 +17,7 @@ import {
   IntersectionObserverItem,
   ItemOrElement,
   OCCLUSION_AVOIDANCE_BUFFER,
+  ScrollMenuProps,
   scrollToItemOptions,
 } from './Carousel.types';
 import { ScrollMenu, VisibilityContext } from './ScrollMenu/ScrollMenu';
@@ -275,44 +276,84 @@ export const Carousel: FC<CarouselProps> = React.forwardRef(
       }
     };
 
-    const handleGroupScrollOnWheel = (
+    const isTouchpadVerticalScroll = async (
+      event: React.WheelEvent | WheelEvent
+    ): Promise<boolean> => {
+      const { deltaY } = event;
+      if (deltaY && !Number.isInteger(deltaY)) {
+        return false;
+      }
+      return true;
+    };
+
+    const isTouchpadHorizontalScroll = async (
+      event: React.WheelEvent | WheelEvent
+    ): Promise<boolean> => {
+      const { deltaX } = event;
+      if (deltaX && !Number.isInteger(deltaX)) {
+        return false;
+      }
+      return true;
+    };
+
+    const handleGroupScrollOnWheel = async (
       apiObj: scrollVisibilityApiType,
       event: React.WheelEvent
-    ): void => {
+    ): Promise<void> => {
+      const touchpadHorizontal: boolean = await isTouchpadHorizontalScroll(
+        event
+      );
+      const touchpadVertical: boolean = await isTouchpadVerticalScroll(event);
       if (event.deltaY < 0 || event.deltaX < 0) {
-        apiObj.scrollNextGroup();
+        // When not touchpad, handle the scroll
+        if (!touchpadHorizontal || !touchpadVertical) {
+          apiObj.scrollNextGroup();
+        }
       } else if (event.deltaY > 0 || event.deltaX > 0) {
-        apiObj.scrollPrevGroup();
+        // When not touchpad, handle the scroll
+        if (!touchpadHorizontal || !touchpadVertical) {
+          apiObj.scrollPrevGroup();
+        }
       }
     };
 
-    const handleSingleItemScrollOnWheel = (
+    const handleSingleItemScrollOnWheel = async (
       apiObj: scrollVisibilityApiType,
       event: React.WheelEvent
-    ): void => {
+    ): Promise<void> => {
+      const touchpadHorizontal: boolean = await isTouchpadHorizontalScroll(
+        event
+      );
+      const touchpadVertical: boolean = await isTouchpadVerticalScroll(event);
       if (event.deltaY < 0 || event.deltaX < 0) {
-        apiObj.scrollBySingleItem(
-          apiObj.getNextElement(),
-          'smooth',
-          htmlDir === 'rtl' ? 'previous' : 'next',
-          !!props.carouselScrollMenuProps?.gap
-            ? props.carouselScrollMenuProps?.gap
-            : DEFAULT_GAP_WIDTH,
-          apiObj.isFirstItemVisible
-            ? -DEFAULT_GAP_WIDTH
-            : OCCLUSION_AVOIDANCE_BUFFER
-        );
+        // When not touchpad, handle the scroll
+        if (!touchpadHorizontal || !touchpadVertical) {
+          apiObj.scrollBySingleItem(
+            apiObj.getNextElement(),
+            'smooth',
+            htmlDir === 'rtl' ? 'previous' : 'next',
+            !!props.carouselScrollMenuProps?.gap
+              ? props.carouselScrollMenuProps?.gap
+              : DEFAULT_GAP_WIDTH,
+            apiObj.isFirstItemVisible
+              ? -DEFAULT_GAP_WIDTH
+              : OCCLUSION_AVOIDANCE_BUFFER
+          );
+        }
       } else if (event.deltaY > 0 || event.deltaX > 0) {
-        const gapWidth: number = !!props.carouselScrollMenuProps?.gap
-          ? props.carouselScrollMenuProps?.gap
-          : DEFAULT_GAP_WIDTH;
-        apiObj.scrollBySingleItem(
-          apiObj.getPrevElement(),
-          'smooth',
-          htmlDir === 'rtl' ? 'next' : 'previous',
-          gapWidth,
-          apiObj.isLastItemVisible ? gapWidth : OCCLUSION_AVOIDANCE_BUFFER
-        );
+        // When not touchpad, handle the scroll
+        if (!touchpadHorizontal || !touchpadVertical) {
+          const gapWidth: number = !!props.carouselScrollMenuProps?.gap
+            ? props.carouselScrollMenuProps?.gap
+            : DEFAULT_GAP_WIDTH;
+          apiObj.scrollBySingleItem(
+            apiObj.getPrevElement(),
+            'smooth',
+            htmlDir === 'rtl' ? 'next' : 'previous',
+            gapWidth,
+            apiObj.isLastItemVisible ? gapWidth : OCCLUSION_AVOIDANCE_BUFFER
+          );
+        }
       }
     };
 
@@ -336,9 +377,14 @@ export const Carousel: FC<CarouselProps> = React.forwardRef(
       }
     };
 
-    const preventYScroll = (event: { preventDefault: () => void }): void => {
-      // Prevent document scroll only when hovering over a carousel that may be scrolled.
-      if (mouseEnter && (previousButtonRef.current || nextButtonRef.current)) {
+    const preventYScroll = async (event: WheelEvent): Promise<void> => {
+      const touchpadVertical: boolean = await isTouchpadVerticalScroll(event);
+      // Prevent document scroll only when hovering over a carousel that may be scrolled and when not using touchpad.
+      if (
+        mouseEnter &&
+        (previousButtonRef.current || nextButtonRef.current) &&
+        !touchpadVertical
+      ) {
         event.preventDefault();
       }
     };

src/components/Carousel/Settings.ts

@@ -9,6 +9,6 @@ interface IntersectionObserverOptions extends IntersectionObserverInit {
 export const observerOptions: IntersectionObserverOptions = {
   ratio: 0.9,
   rootMargin: '8px',
-  threshold: [0.05, 0.5, 0.75, 0.95],
+  threshold: [0, 0.25, 0.5, 0.75, 1],
   throttle: 100,
 };

src/components/Carousel/Tests/ScrollMenu.test.tsx

@@ -80,7 +80,7 @@ const options = {
   ratio: 0.9,
   root: null as any,
   rootMargin: '8px',
-  threshold: [0.05, 0.5, 0.75, 0.95],
+  threshold: [0, 0.25, 0.5, 0.75, 1],
   throttle: 100,
 };