Horizontally Scrolling Site

[jgriffiths]

I was impressed by your Horizontally Scrolling Snippet: https://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?

[jgriffiths]

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.

[RamosPinto]

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!

[Johnnyb]

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

[popeyepete2]

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.

[pardeep]

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.

[Paulie_D]

https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

[Mottie]

Check out this plugin I wrote named [visualNav](https://github.com/Mottie/visualNav) it will make the menu automatically update as well as resize the page content to fit the browser. Demos:

* [Vertical](http://mottie.github.com/visualNav/index.html)
* [Horizontal](http://mottie.github.com/visualNav/horizontal.html)
* [Vertical & Horizontal](http://mottie.github.com/visualNav/horiz-vert.html)
* [Bootstrap](http://mottie.github.com/visualNav/bootstrap.html) (vertical)
* [Section stepper](http://mottie.github.com/visualNav/stepper.html) (only allows scrolling through one section at a time – using a mouse).

[Author]

Posts