帶有平滑滾動的nanoScroller.js

Question

我正在使用nanoScoller.js插件在網站上創建自定義滾動條。這工作正常，除非它可以執行某種緩動/平滑滾動。插件似乎沒有這個選項，我想知道有沒有其他方式可以實現？

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

Answer 1

nanoScroller使用本機滾動行爲，它不模仿它。所以，如果瀏覽器不支持平滑滾動，nanoScroller也不支持它。爲了平滑滾動，您必須使用自定義滾動條來模擬使用動畫/緩動進行滾動。有很多模擬滾動（並支持滾動動畫）的滾動條插件：jScrollPane，Malihu Custom Scrollbar，Perfect Scrollbar,slimScroll和其他。您可以檢查this document以比較滾動條並選擇您需要的滾動條。查看類型爲「模擬器」的滾動條

Answer 2

如果您想使用nanoScrollbar並且仍然想要動畫滾動，您可以爲內容的默認（瀏覽器）滾動條設置動畫效果，並且nanoScrollbar將動畫模擬滑動條，因爲它會監聽滾動事件內容。

下面是動畫滾動到底

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

希望這段代碼可以幫助誰正在尋找替代解決方案的人。