In the development of my interactive web game set entirely in the browser, I am utilizing html5 with all elements integrated into the game world. Due to this setup, precise control over element positioning, scroll behavior, zooming, and other aspects is crucial.
For a specific level, I need to position an element off-screen (just outside the viewport) so that players have to scroll to discover it. However, the issue arises when after scrolling, the page retains the new width, including the previously hidden element. Upon refreshing the page, the zoom adjusts to fit the entire screen along with the exposed element, unintentionally revealing the puzzle and compromising the level's challenge.
I understand that browsers cache information such as scroll position to seamlessly resume where users left off upon revisiting a page. While beneficial in some scenarios, it proves counterproductive for my game requirements. Is there a way to disable this caching behavior or manipulate the page's zoom level using JavaScript?
Currently, I have implemented the following code to reset the scroll position before users exit the page. Although effective, it telegraphs the page scroll right before leaving:
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* Ideally, I wish there was a method like this: */
// window.zoomTo(1.0);
/* But that might be too much to ask for at this point. */
});