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

问题

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

回答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

回答2:

Why not wrap your HTML in a container div and target that, like this:

<div class="container">
  <div id="I-WILL-APPLY-ONLY HERE" class="I-WILL-APPLY-ONLY HERE">
<!-- Content here -->
  </div>
</div>

Then target your container class in the jQuery:

$('.container').mCustomScrollbar...

回答3:

My adapt to smooth on element working: Codepen

$('.smooth').on('mousewheel', function(e){
  wheel(e.originalEvent, this)
})

function wheel(event, elm) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle(delta, elm);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle(delta, elm) {
    var time = 1000;
      var distance = 100;

    $(elm).stop().animate({
        scrollTop: $(elm).scrollTop() - (distance * delta)
    }, time );
}

来源：https://stackoverflow.com/questions/14426548/how-to-change-default-scrollspeed-scrollamount-scrollinertia-of-a-webpage

标签

jquery

html

jquery-ui

jquery-plugins