I have a horizontal scrollable list component, basically an ionic grid. This component takes up the whole horizontal space on the screen, edge to edge. If there are too many items in the list, users scroll around by horizontal swipe actions to navigate to the out of bound items. The problem is when the user swipe action is close to the left edge of the screen, it triggers the back navigation gesture, & application exits current view & navigates to previous view.
I have tried setting up touch event handlers on the ion grid & tried using event.preventDefault() to prevent the default behavior, but that doesn’t prevent the back navigation.
I have seen some code which disables swiping back at the page level (this.routerOutlet.swipeGesture = false)
I tried a variation of it on the ion-grid & was able to make stop the back navigation gesture - basically applying this.routerOutlet.swipeGesture = false; on touchstart & this.routerOutlet.swipeGesture = true; on touchend when a touch event happens on the ion-grid & touch is too close to the edge. It is working, but iIs there a better approach to solve this problem though? Any ideas would be appreciated. Thanks
Using
Ionic - 7.6.6
Angular - 16.2.12
Devices - Android & ios