Hi Swiss bro ;)
I wouldn’t recommend to have a mixed horizontal / vertical scrolling page as this is extremely annoying for the people.
Imagine you visit the site and start scrolling. The page starts scrolling and then it stops and you don’t understand why. It’s only after a good second that you realize that you’re now scrolling that small horizontal thing. Now if you want to keep scrolling vertically you have to move your mouse out of that surface and keep scrolling. (I hope all this makes sense)…
I think the guys on Digitally Imported found a good solution to this problem. The mousemove is assigned to the right/left scroll and the mouse wheel is assigned to the vertical scrolling. That way you don’t have that kind of conflict.
That said, if you reallyreally want the scroll war to happen, answer this message and I’ll try and help you out.
yes i know, i thought about this problem too.
but than i thought, the most people have their mouse mostly in the middle of the browser, so if i have a part in the top of the side which will scroll horizontally, this wont be a big problem. but now (at home) i realised it’s not working with firefox (and i think with IE too).
I don’t really agree with your sentence “the most people have their mouse mostly in the middle of the browser”, especially if they just typed your address in the URL box in their browser, they will probably have the cursor somewhere on the toolbar. Anyway, here’s a fiddle of what I would do (using jQuery):
jeps that’s right, i didn’t thougt about this point :-S
hey wow… thank you! thats working really good..
i just tested it in the office with safari, not at home with firefox. so the final tests i will do this evening.
i have only one/two small questions…
how would/should this work if i want to scroll only if i’m with the mouse in the border area? if i’m on the right side/near the right border of the browser? i think about this because i’m not sure how it would look on a smartphone. i think it could be really difficult to scroll on a small screen with my responsive design, especially when you have a lot of “spans”.
can i build into the jQuery function different sizes for the scrolling? i mean, if i would choose for a smartphone design a smaller cube (“span”, with “some content”) it should change this line, right;
var delta = 1400 – windowWidth;
is this possible with jQuery? or have i to reload the page?
second question: can i fix the scrolling? i make a test with a large browser size. all the spans added together (1400px) are smaler than the browser wide (f.e. 1800px), it should be centered. how could i build this?
-edit:- boah thats a terrible english, hope you can understand me
if not i would write you a message in german =D