How to replicate 'stepless' scrolling on mousedown of non button element?

Hello,

I want to achieve the stepless scrolling behaviour that occurs when holding down an up or down button, but on non button elements, eg something like:

$(document).on("mousedown", ".up", function() {
$('#scrollable_content').mCustomScrollbar('scrollTo','+=100');
});

$(document).on("mousedown", ".down", function() {
$('#scrollable_content').mCustomScrollbar('scrollTo','-=100');
});  

This issue (https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/248) provides a solution to achieve it when scrollbuttons has enable: true.

But how do I achieve this behaviour when scrollbuttons are not enabled?

The desired behaviour is like that achieved with the following settings:

scrollButtons:{ 
enable: true,
scrollType:"stepless",
scrollAmount:"auto"
}

Thank You.

[malihu]

Hi,

You can do it with some extra jquery code. I’m posting a (working) code example below (it’s a bit compact but commented)

var el=$("#content-1"), // set the element with the scrollbar
    duration=3000, // set a base duration/speed of the buttons scrolling
    timer,content;

// scrollbar initialization 
// add the necessary callbacks to your fn call (no need to modify the callback functions)

el.mCustomScrollbar({
    // callbacks needed for scrolling buttons calculations
    callbacks:{
        onInit:function(){ content=this.mcs.content },
        whileScrolling:function(){ timer=duration*this.mcs.topPct/100; }
    }
});

// scrolling buttons functions (assumes your buttons are .up and .down) 
// no need to change anything here unless your buttons have different classes/selectors

$(document).on("mousedown mouseup",".down,.up",function(e){
    var to,speed,on=e.type==="mousedown" ? 1 : 0,
        cpos=content[0].offsetTop;
    if($(this).is(".down")){ // down
        to=on ? "bottom" : cpos;
        speed=on ? (timer ? duration-timer : duration) : 0;
    }else{ // up
        to=on ? "top" : cpos;
        speed=on ? timer : 0;
    }
    el.mCustomScrollbar("stop").mCustomScrollbar("scrollTo",to,{
        scrollInertia:speed,scrollEasing:"linear",timeout:0
    });
}).on("click",".down,.up",function(e){
    e.preventDefault();
});

Hope this helps

[vishalp36]

@malihu https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/259#issuecomment-74359461

how to make it scrollType:“stepped” like this example to custom next prev arrows?