overflow-x AND Middle Mouse Button Moving

M开发者_StackOverflowy Page is 980px in Width, but I have a few design elements (which belong with the background). I positioned them with position: absolute;. This creates a horizontal scrollbar for those who have a =< 1024 resolution. I disabled that scrollbar with overflow-x:hidden on (and for IE7 and etc).

However, when I hold my middle mouse button,(i think this applies to laptop touchpads as well) it let's me move around to the right, is it possible to fix this with anything? (javascript, css)?

Tested this issues in Chrome, IE, Firefox.

---

Realistically, no. There are a number of ways to force content elements with hidden overflow to scroll (for example, Mac users are used to having omnidirectional scrolling controls via a scroll ball or touchpad, and many Logitech and Microsoft mice have tilting mouse wheels). Middle mouse button trapping via Javascript is highly unreliable, and many Windows mouse drivers (such as Logitech's) don't actually register clicking the mouse wheel as a "middle click" but instead directly send the "scroll mode" command to the application.

Unfortunately, you're probably going to have an easier time refactoring your design to avoid using overflow-x: hidden than trying to block all the different ways people can force the content area to scroll.

---

There is a way to capture "onScroll" event:

$('#elementWithOverflow').on('scroll',function(){
    $('#elementWithOverflow').scrollLeft(0);
})

Not ideal but it works for me. In this case, we disallow only horizontal scrolling, vertical is still work. To prevent it use scrollTop() function.