Grow your CSS skills. Land your dream job.

Horizontal Scrolling – but only a part of a website

  • # May 14, 2013 at 9:59 am

    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 http://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 ^^

    # May 14, 2013 at 11:56 am

    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

    # May 14, 2013 at 6:32 pm

    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 ^^

    # May 15, 2013 at 3:27 am

    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!

    # May 15, 2013 at 8:02 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".