How to make mouse wheel scroll smooth in Windows OS

$html = ($.browser.safari) ? $("body, html, document") : $("html, body”);
// How many pixels to scroll
var scrollHeight = 250;
if ($.client.os == "Windows") {
    $('body').mousewheel(function(event, delta) {
        // disable native scroll
        if(event.preventDefault) {
            event.preventDefault();
        } else { // IE fix
            event.returnValue = false;
        };
        $html.stop().animate({
            scrollTop: $html.scrollTop() + (-delta * scrollHeight)
        }, 'slow');
    });
}

Discussion 7 comments - RSS feed

1. Lorenzo Monday, September 19th, 2011 at 9:41 am

   Great script!

2. Manuel Wednesday, November 9th, 2011 at 2:22 pm

   Dear Franck,

   I love your code but i’m having issues making the page scroll to the bottom in Safari & chrome.

   I’ve tested it in the following browsers:
   - IE 9.0 (ok)
   - FF 7.01 (ok)
   - Opera 11.52 (ok)
   - Safari 5.1.1 (not ok)
   - Chrome 15 (not ok)

   Could you give some advice on how to fix this?

   Greetings,
   Manuel

3. Manuel Wednesday, November 9th, 2011 at 2:26 pm

   ps: i love the rss subscibe to comments, never seen that before. Nice feature!

4. takien Sunday, February 5th, 2012 at 11:13 am

   Hello Franck, thanks, that’s what I was looking for.
   Looks fine except on webkit browser.
   Wondering if it can be applied to jScrollPane too.

5. Aldo Monday, June 4th, 2012 at 3:23 pm

   I found the solutions for chrome/safari based browsers:

   just add this line:

   if($.browser.safari) $html = $(“body,hmtl,document”)
   else $html = $(“html,body”)

   intead of

   var $html = $(‘html,body’);

6. Andres Riofrio Thursday, June 14th, 2012 at 5:30 pm

   This breaks on Firefox 13-14, with (Firefox’s) smooth scrolling activated. With this script in the page, each mouse wheel click scrolls double of what it does on other pages.

7. Keso Thursday, August 9th, 2012 at 2:39 pm

   Great stuff – with Aldo’s fix it works perfect for me
   Thanks guys