Scroll Page Horizontally With Mouse Wheel
1) Load jQuery and the Mouse Wheel plugin
Mouse Wheel plugin is here.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>2) Attach mousewheel event to body
The "30" represents speed. preventDefault ensures the page won't scroll down.
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
I look for it long time, thank you very much.
Hey
Thanks for the post!
It seems works in Firefox but not in Chrome.
Any idea to make it run in Chrome?
Thanks.
This code doesnt work for me. I’m using also two scripts for automatic scrolling with anchors. Does anybody know how to fix it?
<script src="/js/jquery-1.4.4.min.js” type=”text/javascript”>
<script src="/js/jquery.localscroll-min.js” type=”text/javascript”>
<script src="/js/jquery.scrollTo-min.js” type=”text/javascript”>
<script src="/js/jquery.mousewheel.min.js” type=”text/javascript”>
$(document).ready(function () {
$.localScroll.defaults.axis = ‘x’;
$.localScroll();
$(function() {
$(“body”).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
I think I have the same problem.. did you get it working?
I tried this and worked:
$(window).mousewheel(function(event, delta) {
event.preventDefault();
var scroll = $(window).scrollLeft();
$(window).scrollLeft(scroll – (delta * 30));
});
Hi there, i got a problem and need your help:
I have on my page 4 absolutely positioned div’s. How do I use this function all the div’s scroll?
Currently, I can scroll only the top div
Here is the page: jb.existenzgruender-in.com
GO to ur Index and put scrooling=”yes” :) easy as that dude!
Hi,
Nice post!
I am looking for a function the create a zoom effect ,when your scrolling with your mouse. Not horizontal or vertical but in the “Z Dimension”. Someone any idees?
Exactly what I was looking for!
It works perfectly on Safari, but not on Firefox for me. At least not on 3.6 OS, any one know? The downloadable example doesn’t work either.
Got it working on Firefox too. I used $(“body”) to refer to the container and it worked perfectly on Chrome. On Firefox, for some reason, the selector must be $(“html”). So, I just combined both to $(“body, html”) and now it works. See the snippet below:
I hope this works, and happy coding ..!
– Kimmo
I stared to death at this problem and thanks to your adjusted code it works!
Thanks Kimmo,
Kleajmp
Thank you so much! This fixed my problem. And also a big thank you to the OP for implementing this. Very much appreciated.
Thanks Kimmo, that got it going!
Why the hell I don’t read replies before fixing bugs by myself…
Great one Chris, keep the new snippets rolling.
Absolutely perfect! Finally the solution for horizontal scrolling in all (modern) browsers!
Thank you so much! :-)
Its the solution which i want
It will help in my horizontal scroll portfolio
Kimmo, actually this is not working in Safari 5.1 on Windows. And I haven’t found a solution yet.
Hi, how to make it work for chosen div only instead whole body, or just for chosen tag? For example for div with id or table.
um sorry but this does not work
Thank you, this fix my problem with horizontal scrolling when overflow: hidden, scrolling on defalut work without mousewheel in FireFox, but not work on other bowser, with your tricks work nice on Chrome etc… Thank you again.
Nope doesn’t work on firefox 8 using $(“html, body”)
overflow: hidden refers to hiding or scrolling contents too big for its container
Add the star selector *.
mousewheel plugin is no longer available to download
Yes it is … u need to go here “https://github.com/brandonaaron/jquery-mousewheel/downloads” … ;) i hope it helps :)
Soo.. anyone found a solution for this to work on Safari? Cause this isn’t viable solution is it doesnt work on Safari which is a modern browser.
Pardon my grammar, I guess it’s from the sleep deprivation :))
Soo.. anyone found a solution for this to work on Safari? Cause this isn’t viable solution since it doesnt work on Safari, which is an important browser.
Can i do this to a div? It works fine but i would do the scrolling only for a div not for the whole page. Please help :)
just replace html,body with the div you want to scroll
not working with the latest firefox 10.0.2
Thanks so much, I am looking for a way to implement my design.
brand new to code and i want to put this in my blog/site – where do i put it?
:/
thanks!
Hi, the code works like a charm!
But, has anyone found a solution to make this functionallity work on an IPad, IPhone or simillar touch devices?
Cheers!
even teh demo on this page here did not work in FireFox 10 ?!
Hello, that what just what i was looking for, but i’m pretty new in html, where should i put the code ?
$(function() {
$(“html, body, *”).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
this.scrollRight -= (delta * 30);
event.preventDefault();
});
});
Works great! Thanks for the code!
$(“body,html”) Works like a Charm in All browsers Latest FF, Safari, Chrome , IE 7,8,9 (win7)
not working on firefox 13.0.1 on WINx64
Great Stuff, very useful for a side-project of mine (photography website) – so I also blogged about it here: http://bit.ly/MD6NHK
Thanks Edd, this worked perfectly for me.
http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/
Hi
this is working almost perfect – spotted a little glitch tho. Seems like when your content does not fill the entire height of the page (and why should it, when you want horizontal scrolling), then theres a certain part of the page at the bottom, where the scroll fails, when you scroll all the way to the other end – in other words, when you scroll away from your original viewport, then the scroll stops working on that bottom part of the page that does not have content.
Could it be something about viewport? Even when HTML and Body both have height: 100% in the initial view, maybe the 100% fails when you scroll away from the “first display”?
Tested on OS X Chrome, Safari latest ver’s.
Indeed a problem. I’m experiencing it too using CSS3′s multi-column layout.
Problem being columns don’t fill top to bottom, so once you leave the first “viewport” (scroll right) where the heights are truly 100%, the site will stop scrolling if you aren’t hovered over text in a column.
This also caused a problem with backgrounds past the initial viewport. But that’s unrelated to the scrolling (just the current implementation of multi-column).
Doesnt work on OSX safari and chrome. Used all the above fix but no luck.
Hi there — I was wondering if there is a way to ‘switch off’ this functionality (having first activated it).
In my case, I have a page that scrolls L > R, and a long hidden div that I’m showing on the same page with jquery. I’d like the horizontal scrolling to be temporarily deactivated when I show that longer div, and then reactivated when I hide it again.
Thanks for any pointers!
I don’t know if it is the best option, but it’s working for me. When you show your div, load the script for “normal scrolling”. It’s the same script as horizontal scrolling, you just have to change “this.scrollLeft -= (delta * 30);” into “this.scrollTop -= (delta * 30);”.
Hey Chris, I wanted to give you a heads up that this snippet is no longer functional. You’re linking to the most current javascript, but the mousewheel plugin is old.
Perhaps for future snippets, note the current versions of the various scripts? (I recently ran into the same problem of a website breaking because my old js wasn’t working with the newest jquery version)
Thanks for the awesome site!
Works great for me in Chrome 21 as of the day of this comment. The mousewheel plugin is the latest version as well.
Thank you for making this possible and very easy for a newbie like me. The plug-in works perfectly in my website, the only problem is when accessing the page using a mac with its horizontal scroll pad (by dragging two fingers horizontally) it seem a bit weird when one has to scroll vertical to move something horizontal. Is there a way to make the horizontal scroll works as well?
preventDefault did it! Many thanks!
Does anyone know how to disable the plugin just to the touchpads?
When navigating with touchpad some conflict between horizontal and vertical movement occur.
If navigating with touchpad I don’t find this plugin useful at all, so it would be just perfect to disable it, when specifically navigating this way, working just for mousewheel.
Can anyone help me?
Hi guys I found a fix for Chrome.
You have to make sure in your CSS that you don’t have anything like:
overflow-y: hidden;
overflow-x: auto;
I suppose if you don’t have any content running along the Y-axis, the plugin does it for you.
Just launched a completely horizontal site and used some info from here to help..at least at early stages… The code morphed a bit. Thanks.
I did manage to get the page and sub pages within it completely growing horizontally to the left using inline-block, white-space:none and font-size:0.
Check it out http://www.longbay.co.nz
Cheers
To all who got issues – Try this:
function mouseWheel(event) {
var delta = 0;
if ( ! event) event = window.event;
if (event.wheelDelta)
delta = event.wheelDelta / 120;
else if (event.detail)
delta = -event.detail/3;
if (delta)
jQuery(window).scrollLeft(jQuery(window).scrollLeft()-Math.round(delta*100));
}
if (window.addEventListener)
window.addEventListener(‘DOMMouseScroll’, mouseWheel, false);
window.onmousewheel = document.onmousewheel = mouseWheel;
To Chris – You already know – But great Tricks you got. Thank you.
When I want to scroll horizontally in Chrome, all I do is hold down the shift key while using the mouse scroll wheel. Down moves to the right, up moves back.
I am trying to get this to work in a single div, or rather when (top > 1400). Essentially, scroll down, meet the div in question- then scroll horizontally.
However, this either causes the elements higher up on the page to get covered by a right margin on scroll down, or disables scrolling completely.
I have been trying
$(function(){ $("#art").wrapInner(""); $("#info").wrap(""); $("#info").mousewheel(function(event, delta) { if (top > 1400) { this.scrollLeft += (delta * 30); event.preventDefault();} else { event.Default();} }); });I know this is messy I have been fumbling around trying to get this to work a couple different ways.
this is awesome thanks
i think it’s not usual to use for website
tanks