treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Horizontally Scrolling Site

  • I was impressed by your Horizontally Scrolling Snippet: http://css-tricks.com/166-how-to-create-a-horizontally-scrolling-site/ .

    I used the table method to make a horizontally scrolling site. I also used some javascript to make it scroll smoothly. Now I'm looking for a way to make the javascript scroll to the exact center of the page, no matter how wide the user's screen is.

    My site is here: http://achieveopedia.com/new

    Any suggestions?
  • Using the entire website as a table is not the way to go. You could easily create this using div's. If you have questions with that, let me know. If someone clicks on the link and say goes to your very last section, the problem is there is no way that section can be centered (the way it sits now). The reason is there is no content to the right of it so the center of that section wouldn't centered. However to answer your question, in order to go to a specific coordinates you could use the jQuery.ScrollTo plugin .
  • I think it's a problem though that my website needs to scroll vertically as well as horizontally... Most of the horizontally scrolling websites that I have seen only scroll side to side, but I need to cram too much info onto the page for this client for that to be successful.
  • I need to accomplish the same thing, a website that scrolls both horizontally and vertically. Ideally, I'd like for it to behave like this.

    Only instead of images, I need text and a share script within each div as well.

    Seems like jQuery.ScrollTo plugin might be a start!
  • Hey @jgriffiths. I think if you're going to design a horizontally scrolling site then you need to treat it as you would a vertically scrolling site. When building a vertically scrolling site you wouldn't build it so that you need to scroll horizontally to view all of the content, so similarly you should design the layout of a horizontal site so that you don't need to scroll vertically. At the moment it seems like you're laying it out like you would a vertical site. Instead of having a footer why not have a fixed sidebar on the right which houses that content? So it's like a footer only on the side, which would make sense for a side scrolling site. Also why not try reducing the height of the header which at the moment is taking up about 30+% of the window height. And how about instead of having two rows of content you just condense it into 1 row? If you have to scroll horizontally to view all of the content then that's only the same as having to scroll vertically to view the whole page content on any other site.

    John
  • Hey jgriffiths, I do all I can not to build a horizontally scrolling site. Actually I have never built one, they were always vertically scrolling. A horizontal scroll is just not natural for the eye to follow. Vertical is much more easier on the eye. It's like I almost get sea sick doing a horizontal scroll. But then again, maybe that's just me.
  • If you need it to scroll all over the place then just google jquery scroll plugin untill you find it. I've seen this just don't remember exactly what it's called. Might be linked to in my link above.
  • @jgriffiths

    I agree with @johnnyb. In order for this horizontal website to be successful it can only scroll horizontally. You will need to cut out or resize some content in order for it to work. If you feel you can't resize content then it may be best to just stick where each section is it's own page. Based on your current layout, I don't think a horizontal page is going to work.
  • hi.guys i have a already a website but Now i want to make it completely horizontally scrolling. So can any one help me or suggest me the best way for it. Thanks in advance.

  • Check out this plugin I wrote named visualNav it will make the menu automatically update as well as resize the page content to fit the browser. Demos: