Below is the Javascript that I'm using on my website. I used it to get the background of the menu bar to freeze (make it so that it doesn't move/isn't scrollable) when it's open on a mobile browser.
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
This Javascript works well except when I navigate back or forward to a page that I've previously viewed where the menu bar was open. In such instances, the Javascript is completely ignored and the background is scrollable. To stop this from happening, I added another script to refresh a page when I navigate back or forth to it. However, with the script, I get a flash of unstyled content that appears for about a second or so when navigating between a page.
if(performance.getEntriesByType("navigation")[0].type == "back_forward"){
location.reload();
debugger;
}
How can I get the first bit of Javascript to work even navigating back or forth to a webpage on a mobile browser after having opened the menu bar? Is setting the webpage so that it refreshes the webpage the best option? Is there a better alternative? Any knowledge that you could share with me would be much appreciated.
