jquery - How to change default scrollspeed,scrollamount,scrollinertia of a webpage

Question

I am tring to change the the default scrolling speed,amount and inertia of a webpage.I google a lot,but in vain

Fortunately,later,this day,I found a plugin which allows us to change the scrollspeed,amount,inertia ONLY WITHIN a particular div tag and not in the entire webpage.

Here is a basic code

    $(".I-WILL-APPLY-ONLY HERE").mCustomScrollbar({
 set_width:false, 
set_height:false, 
 horizontalScroll:false, 
scrollInertia:550, 
 SCROLLINERTIA:"easeOutCirc", 
 mouseWheel:"auto", 
  autoDraggerLength:true, 
    scrollButtons:{ 
enable:false, 
       scrollType:"continuous", 
     SCROLLSPEED:20, 
      SCROLLAMOUNT:40 
     },
    advanced:{
updateOnBrowserResize:true, 
   updateOnContentResize:false, 
      autoExpandHorizontalScroll:false, 
    autoScrollOnFocus:true 
   },
           callbacks:{
     onScrollStart:function(){}, 
    onScroll:function(){}, 
onTotalScroll:function(){}, 
    onTotalScrollBack:function(){}, 
   onTotalScrollOffset:0, 
whileScrolling:false, 
       whileScrollingInterval:30 
 }
   });



<div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
A basic height in pixels would be defined for this element and any content appearing here will have a different scrollspeed,inertia.Mentioning heignt of this div element is compulsary,else i wont show the output    </div>

The issue is that i want for the entire page and not merely withing a particular div element.Any help would be appreciated.Please help me

Thanks in advance

Answer 1

You can use jQuery to do that, take a look in my fiddle: http://jsfiddle.net/promatik/NFk2L/

You may add an event listener of the scroll event, be aware that you may prevent the Default action of the scroll ... if (event.preventDefault) event.preventDefault();

Then the handler of that event, using jQuery animate, will perform the scroll ...

function handle(delta) {
    var time = 1000;
    var distance = 300;

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time );
}

You can set the time, distance (and you can also add an easing method), see the full example in the fiddle