Horizontal Scrolling – but only a part of a website

[derElch]

Hello everybody.

currently i’m rebuilding my website and was inspired by the new Digitally Imported Website (see http://di.fm) they have in the top a horizontal scroll for all channels.. on CSS-Tricks.com i found a similar JS document whichs will allow to create horizontal scrolled websites (see https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ )

Thats mostly exactly what i want to have on my website, but not with the full website, only with the overview about all categories which should be placed under the main navigation.

i dont want wo work with frameworks so my question, how have i to rebuild this script, that only a part of the website would scroll horizontally and everything else normal, vertically?

would be happy about every help. (for my bad, the topic is closed, thatswhy i’m posting here)

greetings from switzerland, derElch // mööhh ^^

[JoniGiuro]

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.

Cheers from Züri,

Jonas

[derElch]

hi jonas

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).

how would you solve this with mouseover? i have to say i’m not good with javascript, can only HTML, CSS and on a averange level of PHP. i think once i have to build a first design version to can test and include these functions right…

greetings from switzerland, derElch // mööhh ^^

[JoniGiuro]

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):

[Link to the fiddle](http://jsfiddle.net/jonigiuro/4jwHF/ “Link to the fiddle”)

Hope this helps!
Cheers!

[derElch]

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

[Author]

Posts