Android hardware back button & pushstate problem

I am having an issue I cannot solve. \I would like to use the android hardware buttons to control backwards movement between pages, so I have enabled pushState: true.
For the most part this works fine, one page has some modals on. I would like these to close with the back button, which they don’t the navigation works behind them.
So I got a bit of code from StackOveflow which i have added into a device ready function.

document.addEventListener('backbutton', function navigateBack() {
            var mainView = app.views.main;

            var leftp = app.panel.left && app.panel.left.opened;
            var rightp = app.panel.right && app.panel.right.opened;

            if (leftp || rightp) {

                app.panel.close();
                return false;
            } else if ($$('.modal-in').length > 0) {

                app.dialog.close();
                app.popup.close();
                return false;
            } else if (app.views.main.router.url == '/index/') {
                navigator.app.exitApp();
            } else {
               mainView.router.back();
            }
    }
    , false)}

As soon as I add an event listener to the back button, all normal functions of the back button cease to work correctly.
In the above code the modals close and the back buttons work perfectly, but from the main index page, the app will not exit…

Remove the code and the back function works perfectly and the app will exit but the modals don’t close (obviously)

This part isn’t working… Is there any reason why?? Thanks

} else if (app.views.main.router.url == ‘/index/’) {
navigator.app.exitApp(); }

Try to use current to future proof:
app.views.current.router.back()
app.views.current.router.url

Make sure it’s hitting the block and it’s exactly “/index/”.
console.log(app.views.current.router.url)

If using Cordova, might need to call from window:
window.navigator.app.exitApp()

I did console.log(app.views.current.router.url) and it was correct.

I have gone another way now and have used routeable modals. This has solved the issue and created some more.

I now have the ability to go back from the modal. this is great. On android it works perfectly, but on IOS it has now created a weird effect that you can pull down the page and grey bars appears above or below, instead of scrolling on a fixed page.

If i can get rid of that, I can solved all my problems.

Have you tried: overscroll-behavior-y: none; ?

Hi thanks for the help.
In the end I used this to solve the problem.

<preference name="DisallowOverscroll" value="true" />