1

As far as I know, there's no proper way to disable the iOS back/forward swipe gestures using JS/CSS. A hacky way to disable them is to do this (from Is there a a way to disable swipe back animation in Safari on iOS?):

  root.addEventListener('touchstart', e => {
    const touch = e.touches?.item(e.touches.length - 1);
    if (touch && (touch.pageX <= NEAR_EDGE_PX || touch.pageX >= window.innerWidth - NEAR_EDGE_PX)) {
      e.preventDefault();
    }
  });

However, this disables clicks near the edges. I added this to re-enable clicks by triggering a click event:

  root.addEventListener('touchend', e => {
    if (!moved && performance.now() - startTime < CLICK_MAX_WAIT) {
      window.setTimeout(() => {
        e.target?.dispatchEvent(new Event('click', {
          bubbles: true,
          cancelable: true,
        }));
      }, 0);
    }
  });

This works most of the time, but it doesn't work for inputs, <select/>, etc. I could add more logic to handle inputs, but it's getting too hacky.

Is there a better way to do this?

Leo Jiang
  • 24,497
  • 49
  • 154
  • 284

0 Answers0