Horizontal scrolling

Russinating · 26 Mar 2015 at 11:38

I'm looking to create a horizontally-scrolling website, scrollable via the mouse wheel, and I've knocked up one with a JS script but it relies on a fixed width which is useless for pretty much any website with more than one page or variable content.

Anyone know of any better scripts that allow for variable content?

touch · 26 Mar 2015 at 12:04

Can we see your example site?

Not sure how the code would work but I dont imagine it would be too difficult to change to a variable width.

(I dont think it's a good idea in terms of UI to use the mouse wheel for horizontal scrolling though. Is it going to work for people who dont have a scroll wheel? laptops/tablets/phones)

Russinating · 26 Mar 2015 at 12:34

I'm creating it locally atm but I've uploaded the current test to http://beta.novelphotography.co.uk and I think I've found a solution with http://manos.malihu.gr/jquery-custom-content-scroller/

I know the pitfalls of horizontal scrolling, there's still a scrollbar and there'll be a different version for mobile, though that script does work via touch too.

fez · 26 Mar 2015 at 12:35

Sideways scrolling websites aren't very common for a reason. There are plenty of jquery plugins that will allow/ help you do this but from a usability perspective they are not great. If you gave us a bit more of an idea what you want we could help more.

E. That doesn't work that well on mobile. Perhaps it will be better when it more related to the final product but I have never used a horizontal scrolling site I liked. Is there a site you are taking inspiration from?

Russinating · 26 Mar 2015 at 12:57

No inspiration in particular, the main reason is something a little different but not too crazy, and it's, as the domain gives a way, largely photography which I think does suit horizontal layouts. In fact any pages (ie contact) without photos won't require scrolling so it'll be purely for that.

And yeah, haven't looked at mobile at all just quickly checked if it worked basically as a fallback. Like I said there'll be a separate mobile site.

touch · 26 Mar 2015 at 13:23

In my opinion, if there's no specific reason you need it to scroll horizontally, you should just stick to a normal vertical scrolling website.

A few reasons why I say this:
1- Menu links will need to be scripted to scroll to the correct place. I dont think an anchor tag can sroll horizontally.
2- It changes a lot of the default scroll behaviour. Usually my scroll wheel moves a site up/down, not left/right. I also dont actually use the scroll wheel much and prefer to click it to toggle scrolling, which is blocked on your site.
3- It's going to be very difficult to fit content onto smaller screens. HTML naturally fits objects/text into the available space and flows things below if they dont fit. You'll need to do quite a lot of work to prevent the default behaviour and get things to flow horizontally rather than vertically.

Russinating · 26 Mar 2015 at 14:09

Appreciate your advice, just up for a challenge and fancy designing something a bit different too.

1. There'll be no anchor links so that shouldn't be an issue
2. Not 100% sure what you mean about clicking to toggle scrolling, but I've added arrows to the scroll bar and you can click anywhere along the bar
3. Yep, will be some work

Updated the previous link just as I'm going and to show those changes.

touch · 26 Mar 2015 at 14:19

Ok, fair enough. Go for it.

The scroll thing I am talking about is when you click the mouse wheel. Dont know what to call it, but you get the scroll icon on screen and you can scroll by moving the pointer around. I use this most of the time (got into the habit after years of using a mouse with a broken scroll wheel)

It looks much better with the background and styled menu in place.

Russinating · 26 Mar 2015 at 14:42

Ah, I see, gotcha. I'll see if you can enable that with that script.

Willir · 27 Mar 2015 at 12:50

I'd personally go for a parallax scrolling script, seems to be the common and most modern way.