I'm using the nanoScoller.js plugin to create custom scrollbars on a website. This works fine except it would be nice if it could perform some kind of easing / smooth scrolling. The plugin doesn't seem to have an option for this, I was wondering is there any other way this can be achieved?

$('.nano').nanoScroller({
    alwaysVisible: true
});

I'm using the nanoScoller.js plugin to create custom scrollbars on a website. This works fine except it would be nice if it could perform some kind of easing / smooth scrolling. The plugin doesn't seem to have an option for this, I was wondering is there any other way this can be achieved?

$('.nano').nanoScroller({
    alwaysVisible: true
});

• javascript
• jquery

2 Answers 2

In case you want to use nanoScrollbar and still want to animate scroll, you can animate the content's default (browser) scrollbar and nanoScrollbar will animate the emulated slider as it listens to scroll events of content.

Below is the code for animating scroll to bottom

var el = $('.nano-content');
el.animate({ 'scrollTop': el[0].scrollHeight }, 'slow');

Hope this helps people who are looking for alternative solution.

nanoScroller uses native scrolling behavior, it does not emulate it. So, if browser does not support smooth scrolling, nanoScroller does not support it too. To make smooth scrolling you have to use custom scrollbar that emulates scrolling with animation/easing. There is a lot of scrollbar plugins that emulates scrolling (and supports scroll animation): jScrollPane, Malihu Custom Scrollbar, Perfect Scrollbar, slimScroll and others. You can check this document to pare scrollbars and select the one you need. Look at scrollbars with type "emulator"