I’ve been playing around with two different plugins to create a horizontally scrolling website - horizontalScroll.js and jInvertScroll
I haven’t mobile optimised them - I think I’ll just abandon the horizontal scroll for mobile and keep it vertical as fidgeting around with the content would be a nightmare. They both work across chrome, firefox and IE9.
horizontalScroll.js
Here’s the horizontalScroll.js sample site - you can see that when you scroll, it scrolls one full page/section - http://wildflower-pictures-h2.webflow.io/
jInvertScroll
Here’s the jInvertScroll sample site - you can see that when you scroll on this site, it scrolls by how much you’ve turned the scroll-wheel/trackpad - http://wildflower-pictures-h.webflow.io/
If you’d like access to see how it was achieved, just ask and I’ll post the webflow share link
It looks great! Sometimes it was not wanting to scroll though. Not really sure what was causing the glitch. Im using Chrome. I am not using a mouse though, I am using the mac trackpad
I couldn´t find the code when I inspected the site and im not so good at this, but do your code look something like this?
$.jInvertScroll(['.section'], { width: '100vw', // Page width (auto or int value) height: '100vh', // Page height (the shorter, the faster the scroll) } });
And is it put in the Custom Code area end of <head> tag?
The custom code is site-wide so it’s in the site settings so it doesn’t show in the preview. However, I’ve copied it over now and you’ll see it in the custom header and footer code of the home page.
Horizontal Scroll-Partial
Here’s the jInvertScroll sample site - you can see that when you scroll on this site, it scrolls by how much you’ve turned the scroll-wheel/trackpad
