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?