Simply swap horizontal and vertical scrolling using mousepointer

Question

I am unsure of what code I am looking for here - I think probably javascript although I wonder if it could be achieved with CSS

The situation: I have a div (with a fixed width and height) - the content of this div exceeds both the width and height of its parent and there is therefore a scroll bar on the vertical and horizontal.

The behaviours to effect: When I hold down my mouse on the vertical scrollbar and pull up or down, the content scrolls vertically. When I hold down my mouse on the horizontal scroll and move left or right the content scrolls horizontally. This is the default and expected behaviour I know, I am being precise so that my question is clear.

The question: What I would like to do is a direct swap of these behaviours so:

When I hold down my mouse on the vertical scrollbar and pull up or down, the content scrolls horizontally

AND

When I hold down my mouse on the horizontal scroll and move left or right

I realise there are pretty obvious reasons why this is a bad idea but I need to be able to demonstrate this and don't seem to be able to find any examples. I'm not looking to make the page scroll horizontally when I roll my mouse vertically or anything like that that seems to come up often, I simply want to swap the behaviours of the vertical and horizontal scroll bars.

I can post code if necessary but the situation is pretty generic I think, just a div with horizontal and vertical scrollbars.

Any help would be much appreciated

Answer 1

This is definitely possible, at first I thought it would be either impossible, or require a lot of work arounds a many different things, but I have made this for you in a jsFiidle:

jsFiddle example

The reason this works is because I first keep the current positioning of every scroll each time the scroll event occurs with my 2 variables cur_left and cur_top.

I then set the new scroll positions of both scroll bars with new_left and new_top.

Using this information, I use a function to check which of the scroll bars were acted upon first, simply by checking if orig_left != cur_left.

I then simply set the new scroll positions relatively to which event came first, I have also put exact positions and which event is happening below the example.

I hope this is what you wanted and easy to understand, if not, I will refine my code for you!

NOTES

• As meetamit noted, this won't work in a lot of handheld devices because of the way touch scrolling works - Tested on iPad and it jittered and bounced around
• This example was coded in jQuery for ease of use

• This example will not work if the content does not have an equal
  amount of height to width example:

  width = 250px; height = 200px;

  This will only scroll up to 200px across the horizontal scroll bar when scrolling with the vertical

• This was only tested in Frontmotion Firefox

EDIT

I have noticed that in my output box it always says top and never says left, this is because the events happen so fast that because I have set top to be after left, it overrides the target variable before you can even see it change, to debug this I simply put a console.log() into the function, and you can definitely see it comes up