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(); }); }); See the Pen
Horizontal Scrolling with mouse wheel by Chris Coyier (@chriscoyier)
on CodePen.
I look for it long time, thank you very much.
i want to use the same property for vertical scroll but i dont want the vertical scroll bar to appear….anyone to help??
@ezaz To achieve that put the following style on your body element:
overflow: hidden;
Or you could use overflow-y:hidden for specify the vertical
Hey
Thanks for the post!
It seems works in Firefox but not in Chrome.
Any idea to make it run in Chrome?
Thanks.
It seems to work in chrome but not in Firefox for me!!
I think it’s because the event is not the same for all browsers. I used to do this way: (using jQuery)
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?
Please send the jquery.localscroll-min.js and jquery.scrollTo-min.js files.
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…
Thanks, it works like a charm!!
Kimmo thank you so much for this. I haven’t been able to figure this out for hours!
Thank you Kimmo for your solution! It works perfect in FF and well as the other browsers – you saved my day!
I had the same problem, but Kimmo’s solution was the trick =).
Thanks a lot!
Greettings.
This worked for me! Thanks.
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 :)
It seems to work in chrome but not in Firefox for me!!
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();
});
});
Hey, if you are new to HTML chances are this is way to advanced for you. Especially considering this is jquery not HTML.
Works great! Thanks for the code!
$(“body,html”) Works like a Charm in All browsers Latest FF, Safari, Chrome , IE 7,8,9 (win7)
beautiful, thanks.
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).
I’m also experiencing this problem related to css3 multi column layout. It seems scrolling with the scrollwheel doesn’t work when the cursor has a position that is between the columns. I’ve noticed this problem in the current Chrome (28). The current firefox (22) doesn’t have this problem.
I’m currently investigating why this problem doesn’t occur with the jQuery nicescroll plugin. (Which i can’t use for other reasons)
Has anyone solved this already?
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.
It works properly on my end as well!
Does this work on an element like a div instead of body?
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
And… Um yeah, 12 months later and a new marketing manager decides to rebuild the entire site into a templated wordpress site. We worked hard to make a very usable horizontal site that pleased the clients and branding agency and had a great umbraco CMS customise for a modular horizontal aproach.
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
I got you guys –
This works on all of the latest browsers (desktop at least) :
Even your demo doesn’t work.
Works for me. I’m going to bury this for now. If you can provide some data on where/how it doesn’t work I’ll un-bury.
Chris’s code doesn’t work on Firefox. I assume this is what you are referring too?
My code above works on all browsers.
Hi,
This is awesome, thanks.
However, the link to the plugin at the top is broken. You might want to try to link to the GitHub project at https://github.com/brandonaaron/jquery-mousewheel
Hope this helps.
hi there,
i got an issue while using this snippet.
http://thomas-boecker.net/ — in the gaps between the images (margin) the script won’t work and nothing happens if i scroll.
doey anybody has an idea how i can fix this?
thanks alot!
Hi phillipp,
One solution is to use padding-right:25px; instead of margin.
Hope this helps.
A
crazy. just before i asked here, i already tried padding and it didn’t work.
thanks alot, now it’s working! digital voodoo!
Hehe.. It is, isn’t it? :)
Good job!
ahh, it’s me again. help.
switching margin to padding worked in chrome, but in safari the blank spots are still dead zone for the script :(.
Have you tried binding the script to your #media wrapper div?
I.e.
$(‘#media’).scrollLeft( scroll – ( deltaY * 100 ) );
Very nice. Thanks
Hi, guys. Does anyone know how to make a smooth horizontal scroll using mouse wheel?
nice trick i love this site!
What am I missing here?
Firebug Console:
tested in both FF and Chrome
Any and all help is appreciated!
Update
Got it working using Kevin’s (Jan. 2013 comment) page source:
http://www.designedbyaturtle.co.uk/2012/horizontal-scrolling-with-jquery/
the example is not working
Works for me, so I’m going to bury this until you can provide more information on how exactly it doesn’t work. Browser/platform/version + screencast would be ideal.
Hi, Thanks for the script but it is not working on Firefox. I am using a 24+ version of Firefox. The script works fine on chrome but not on Firefox with mouse scrolling but the keyboard arrows work to move the page left-right.
Sorry mate, but nothing scrolls in firefox 17.0.9. Any suggestions?
For FF you have to use “DOMmouseScroll”, MDN docs here:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Also take a look at my solution where I added browser support on line 7 here:
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
”’
var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? “DOMMouseScroll” : “mousewheel”;
”’
Hi guys, is there any way to make it work with overflow-x ? I want my gallery to scroll both with my custom scrollbar and with mouse wheel and i’m trying to make it work like for days with no result..
Hi Guys,
Found a way to make it work on both Windows and Mac OS X, just by changing the ’30’ value to ‘event.deltaFactor’ like this:
works only in webkit browser does not work in firefox
I think this is not an optimal solution, because if you have a trackpad and scroll from left to right or right to left, the scrolling is not smooth. It seems to be a solution for making a vertical scrolling movement a horizontal one, but it creates problems if you scroll horizontally…
Stefan, same issue here—did you solve it somehow? Or just abandon the idea?
I am trying to use this together with a map created with the Esri API – it seems there is a conflict in the libraries – anybody have experience with this? Have a look at this JS Fiddle: http://jsfiddle.net/bretwhiteley/x8h2j2zf/1/
See my working with mousewheel as well here http://englishextra.github.io/pages/tests/tests_ege_news.html
@Tyler
— Oh Yeah. This is bothering me too – Firefox and IE10 at least – they cope with that, but not Chrome and Opera which is webkit-based now.
Just had to make a small adjustment because in my case I wanted to scroll when the event was over the element only:
Ok, my final adjustments to the original code who works on IE9, chrome, firefox for PC.
And Chrome, firefox, Safari on MAC.
If bug happens, thanks to tell…
doesn’t work in Chrome on Win 7 and Win 8.1
Hello! Does anyone have a code so that with an if/else checking window size can activate or deactivate the script accordingly?
thanks!
if(window.width() > 1024) {
//PLACE INIT CODE HERE
}
just to correct, Joe. You can use window.outerWidth (a property, not a method) or – using jQuery – $(window).width().
But using window.outerWidth you grant that the value will match with CSS media queries.
It doesnt work in IE11 on Win8.x touchscreens. Does anyone have a solution?
Might be because mousewheel event is fired only when the “mouse wheel” is used. I think for touch you should use touchmove event or something like that. (Internet Explorer has some prefixed events for this like MSTouchMove as you can see here https://msdn.microsoft.com/en-us/library/dn304886(v=vs.85).aspx )
I baked my own in vanilla JS and even added in an animation ;)
i need infinite scrolling left with 4 div should be repeat and with no plugins.please help ,
Plugin’s great, only thing is I have a part of my site where a div pops up with a lot of content, and when that happens I want to be able to scroll vertically just inside that div. Any ideas???
You really need to fix the mouse Wheel plugin link, the link is wrong so nobody can download it, which makes this post rather useless :(
So I view this as a good challenge for you to learn to code. Stop doing SODD (Stack Overflow Driven Development).
The vanilla solution is rather simple:
var divToScroll = document.getElementById(‘scrollDiv’);
divToScroll.onscroll = function( ) {
//read and learn:
// https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX
}
Sup guys, if you want to make it work for a single / specific element ( div, or something else) here it is:
$(document).ready(function(){
$(‘#gallery’).mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
Hey guys
So I seem to be the only one to have the problem that with every code I get the TypeError: undefined is not a function (evaluating ‘$(“body”).mousewheel(function(event, delta) { …
When I open the demo in my browser it works, but in my code it doesn’t
What do I do to avoid this?
There seems to be a few issues with this option if you want to target a specific element on the page without the rest of the screen scrolling.
If found this as an alternative for anyone who is interested:
FIddle: http://jsfiddle.net/tovic/GuaHC/?utm_source=website&utm_medium=embed&utm_campaign=GuaHC
Source: http://www.dte.web.id/2013/02/event-mouse-wheel.html
Your welcome…
Hello,
Is there any option in such a way, that we use and the first row or tag is fix position but can scroll Horizontal, and the all tag will also Scroll Horizontally until the tag’s data end. Demo is
http://codepen.io/anon/pen/LGoLGZ
Please help…
Just updated the code suggested by Warren Nugent so it actually scrolls:
http://codepen.io/coddess/pen/GoadwV
This is a very minimally clean implementation, very nice :)
hello where should i put the code in html file or create new file for it please tell me or rpl me on my mail
thankyou
Hi,
i’ve used the script not for a text but for image, but this works in half , in the sense that scroll but at a certain point hangs.
where am I wrong ? how can i use the script for the images ?
Thanks
it works well with as few images like here : http://www.nicolacolonna.com/
but not for many images as here : http://www.nicolacolonna.com/b&wplaces.html
Can you help me?
thanks
Thank you developer and who ever help here
I should make a vanilla javascript port of this utilizing memoization so there’s no pixel tracking onscroll.
Anyone know how to add anchor links to this. As in click on link and it jumps to content
delta was returning NaN for me so I had to add this check:
Seems Chrome 61 broke this. Any ideas on how to fix? Ruined my site! :(
Concept:
Build an img slider that slides images horizontally, and Modify it to onscroll, instead of onclick.
This doesn’t work now.
I made this for you: Horizontal scrolling using vanilla JavaScript + lodash to avoid error prone loops.
Demo:
https://jsfiddle.net/JOEHOELLER/2ofxrp8d/3/
Updated version to support < 5 items, versus >5 that could be generated by server or JSON data:
https://jsfiddle.net/JOEHOELLER/xs1gndfc/5/
Vanilla JS + FP (Functional Programming) version to handle multiple horizontal-scrollers on one page. Use any mark up (HTML) you want, just add the css classes:
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
For folks that dont understand FP (I know it is tough) here is the ES5 version, plain ole’ vanilla JS to handle multiple horizontal-scrollers in one page. Works off of CSS classes so no refactor for CMS template engines, or minimal refactor for Angular or React:
https://jsfiddle.net/JOEHOELLER/vw038gqz/1/
it is not working as expected because it moves the horizontal scroller along with the horizontal scroll…
I know this is a very old post, but, for the record, the example is no longer working in
FireFox (65.0.2)
Chrome (73.0.3683.75)
On MacOS.
Does work in Safari (12.0.3 ), though.
vertical scroll not working after horizontal scrolling end. please give me a solution
Very old script, not working with modern frameworks
Works for my wondering why people are saying not, I plan on using this as its simple and clean, I do wonder how the unmousewheel is used any ideas?
I just made a pure javascript way to do that also handdle vertical scrolling
https://gist.github.com/FelixLuciano/aee75b72d655f72b8d729615861d0147
Doesen’t work for me to. Chrom and edge last version of the day of the comment.
It goes right but down too. Both at the same time, seems glitchy
Does this still work? I’m on my phone right now and can’t tell.
https://jsfiddle.net/JOEHOELLER/442LpLe5/3/
Hello, very useful guide, I wanted to know if it is complicated to give a parallax effect to horizontal scrolling or a full page scrolling effect with slide effect
Hi Adrian,
Take a look at this example:
https://tympanus.net/Development/HorizontalSmoothScrollLayout/index5.html
This was created with Locomotive Scroll:
https://locomotivemtl.github.io/locomotive-scroll/
Is there a possibility to combine this with matchMedia to only get the horizontal scroll on a certain window size?
Very nice code for horizontal scroll, there is method for more fluid scroll too??
Hello, very useful guide, I wanted to know if it is complicated to give a parallax effect to horizontal scrolling or a full page scrolling effect with slide effect