Disabling middle click scrolling with javascript

Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.


This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.

Nowadays, you can do this with a single line of vanilla JS:

document.body.onmousedown = function(e) { if (e.button === 1) return false; }

Currently, my solution is this: (more jquery!)

$(".togglable").wrap(
  "<a href='javascript:void(0);'
  onclick='return false;'></a>"
);

By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.

Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.

But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.


It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.

Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.

Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting <body style="overflow:hidden;">.

This is hardly achievable in general case, but sometimes might be useful.