0

I have noticed that when I use "overflow-x: hidden" to hide horizontal scroll bars and prevent manual scrolling, that I can still scroll using arrow keys in Mozilla Firefox (this probably happens for mouse wheel as well but I don't have a mouse wheel to test it with).

In Google chrome hiding the scroll bars does prevent scrolling, which is the behavior I want because I want to control horizontal scrolling entirely with javascript.

How can I prevent the user from controlling the scrolling across all browsers?

Here is an example jsfiddle: http://jsfiddle.net/tDzpm/3/

body{
    overflow-x: hidden;
}

I don't want the user to be able to scroll left and right in that fiddle.

  • Please put together a jsFiddle demonstrating the problem. – BenM Feb 14 '14 at 16:26
  • possible duplicate of [How to disable scrolling temporarily?](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) – Mooseman Feb 14 '14 at 16:29
  • 1
    Why would you want to do that? –  Feb 14 '14 at 16:31
  • I want to do it so that I can use javascript to control the scrolling. That helps fix the problem, but it doesn't answer why this happens in Mozilla but not in Chrome. I am looking for a deeper understanding of the system as well as solution. –  Feb 14 '14 at 16:36
  • Hiding scroll bars also won't prevent scrolling on tablets and other touchscreen devices. – nullability Feb 14 '14 at 16:36

2 Answers2

2

overflow: hidden only hides the scrollbars. Page Down/Up, arrow keys, and the mouse wheel still work. See the How to disable scrolling temporarily? question on Stack Overflow on how to disable them.

Community
  • 1
  • 1
Mooseman
  • 18,763
  • 14
  • 70
  • 93
-1

You can solve it by using Javascript to overwrite the default-functionality of the arrow keys.

I added a simple JQuery function, which should be called at 'the end' of the site/pageload-cycle (e.g. in a script-tag like)

<script type="text/javascript">
$("html").keydown(function(event) {
    switch(event.keyCode) {
        case 32://space
        case 33://pgup
        case 34://pgdn
        case 35://end
        case 36://home
        case 37://left
        case 38://up
        case 39://right
        case 40://down
        return false;
    }
});
</script>
Visionstar
  • 355
  • 2
  • 12
  • This won't prevent other methods of scrolling, such as the mouse wheel and other driver-specific implementations. Plus it's simply a bad experience to override the functions of common keyboard commands. What if the user is disabled and can only use a keyboard to navigate? – nullability Feb 14 '14 at 16:33
  • that would really be too bad, but i dont see why the other method shouldn't 'block' disabled users too? – Visionstar Feb 14 '14 at 17:14