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

Try scrolling here,http://manos.malihu.gr/tuts/custom-scrollbar-plugin/multiple_scrollbars_example.html This is inertia. Scrollamount is the amount/%/pixels scrolled every time u scroll. More the scroll amount,more u scroll(there is a thin line of difference between scrollamount and scroll speed) — Rahul Shah, Jan 20 '13 at 16:37
i cant really explain,what inertia exactly means,........here is an example http://www.loisjeans.com/web2012/es When u scroll,the page scrolls,the elements move upwards and stop slowly . — Rahul Shah, Jan 20 '13 at 16:40

score 11 · Answer 1 · answered Jan 20 '13 at 23:31

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

Calum Gunn · Answer 2 · 2013-01-21T11:07:28.047

1

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...

edited Jan 21 '13 at 11:07

answered Jan 20 '13 at 23:02

Calum Gunn

11
2

Care to elaborate on that? Show an example how to do so? – Veger Jan 21 '13 at 07:43
In your HTML: '

', then target that in the jQuery with $(".container") – Calum Gunn Jan 21 '13 at 08:50
It would be better to *edit* your answer instead of using a comment. So you are able to use (code) formatting. – Veger Jan 21 '13 at 08:53
This is exactly what i dont want. i want it for the whole page and not for a particular element. – Rahul Shah Jan 21 '13 at 16:58
But (as I'm trying, and obviously failing to say!) if you wrapped your whole page in the container div, that would do the trick. – Calum Gunn Jan 22 '13 at 11:04

score 1 · Answer 3 · answered Jul 11 '18 at 20:12

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

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

3 Answers3

Linked