How to stop the browser from scrolling while in a game

browserflashmousemouse-wheelscrolling

Some games and programs use the scroll wheel to scroll or zoom, but if the main window is large enough, this will usually scroll the browser window as well, which will put the game off of the screen. Is there a way to stop this from happening? Ideally, something would autodetect where the focus is and only apply the mouse wheel inputs to that space, but it would work almost as well for something to quickly disable scrolling and re-enable it later. Maybe the scroll lock button can be appropriated, not like it does anything else. It would be really cool to press scroll lock to disable scrolling and press it again to re-enable it.

I know there are ways to make a game so it doesn't scroll the window when focused; I'm trying to find a way to make it so ALL the games I play act like that.

Best Answer

I was dealing with this exact problem while trying to play this flash game on armorgames.com (yea, I know, Flash is decomming in 2 days. Please don't rub it in).

Basically, the game allows you to switch between weapons with the scroll wheel, but the webpage is so large that the browser scrollbar appears and the whole page scrolls up/down whenever you try using the scroll wheel to switch weapons.

Solution:

To fix this, I used a bookmarklet that runs some code to toggle the scrollbar 'off' when I'm playing the game. (After I'm done playing, I can run the same bookmarklet and it will turn the scrollbar back on).

javascript:(()=>{document.body.style.overflowY=document.body.style.overflowY===''?'hidden':''})();

Explanation:

The bookmarklet is using a ternary operator to toggle the hidden property of the overflowY attribute on the style of the <body> tag element in the webpage's HTML.

document.body.style.overflowY = document.body.style.overflowY === '' ? 'hidden' : ''

If the overflowY style is not set on the body tag, it will set that style to hidden. Otherwise, it will remove that style.

Usage:

Create a random bookmark, name it something like 'Toggle browser scrollbar', and then paste the entire line of code in the 'Solution' section above into the 'URL' box of the bookmark. Go to the webpage where you want to disable the browser scrollbar, scroll the browser to the position where you want it to freeze, and then click on the bookmarklet you created. (If you want the scrollbar to reappear, just click the same bookmarklet again)

Related Question