Code Snippet
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
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
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