PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Scroll Page Horizontally With Mouse Wheel

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();

   });

});

Reference URL

Subscribe to The Thread

  1. stone

    I look for it long time, thank you very much.

    Reply ↓
  2. Peter Shi

    Hey
    Thanks for the post!
    It seems works in Firefox but not in Chrome.
    Any idea to make it run in Chrome?
    Thanks.

    Reply ↓
  3. Joan

    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();

    });

    });

    Reply ↓
  4. Karlisson

    I tried this and worked:

    $(window).mousewheel(function(event, delta) {
    event.preventDefault();
    var scroll = $(window).scrollLeft();
    $(window).scrollLeft(scroll – (delta * 30));
    });

    Reply ↓
  5. Bastian

    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

    Reply ↓
  6. Thomas

    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?

    Reply ↓
  7. Candice

    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.

    Reply ↓
  8. Kimmo

    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:

    $(function() {
			$("html, body").mousewheel(function(event, delta) {
				this.scrollLeft -= (delta * 30);
				event.preventDefault();
			});
		});

    I hope this works, and happy coding ..!
    – Kimmo

    Reply ↓
  9. Hiren Khambhayta

    Great one Chris, keep the new snippets rolling.

    Reply ↓
  10. Paul

    Absolutely perfect! Finally the solution for horizontal scrolling in all (modern) browsers!

    Thank you so much! :-)

    Reply ↓
  11. Ajay

    Its the solution which i want
    It will help in my horizontal scroll portfolio

    Reply ↓
  12. Tomas Danilevicius

    Kimmo, actually this is not working in Safari 5.1 on Windows. And I haven’t found a solution yet.

    Reply ↓
  13. Sam

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~