Prevent swipe from navigating back or forward in browser history

[NoopDog]

Need

On the entity list tables, swiping left and right to scroll the table can easily cause the browser to go to the previous or next page in browser history. This does not happen in Google Sheets for example.

Approach

Determine how to capture the swipe event and prevent it from causing the navigation. Do allow the scroll of the entity list table on swipe.

From ChatGPT (confirm this is a common approach )

To disable the forward and back browser navigation triggered by a three-finger swipe gesture for your web page, you can use JavaScript to intercept the default behavior of the wheel event, which macOS translates for gestures. Here's a step-by-step guide:

1. Capture the Wheel Event
   Add an event listener to capture the wheel event, which is triggered during swipe gestures.

2. Prevent Default Behavior
   Detect horizontal swipe gestures and prevent the default browser action (navigating back or forward).

3. Example Code
   Here’s how you can implement this on your page:

document.addEventListener('wheel', (event) => {
    // Check if it's a horizontal swipe gesture
    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
        event.preventDefault(); // Prevent default navigation
    }
}, { passive: false }); // Use passive: false to enable preventDefault

4. Explanation
   event.deltaX: Indicates the amount of horizontal scroll/swipe.
   event.deltaY: Indicates the amount of vertical scroll/swipe.
   Math.abs(event.deltaX) > Math.abs(event.deltaY): Ensures the event is primarily horizontal.
   { passive: false }: This ensures you can call preventDefault on the event.

5. Compatibility
   This method will work on most modern browsers and effectively stops three-finger swipe gestures from triggering browser navigation while your page is active.

6. Testing
   Try implementing this script and testing it on your webpage. You should see that horizontal swipes no longer navigate the browser's history. Instead, you can handle the swipe gestures for scrolling or other custom behaviors.