Question

我正在使用nanoScoller.js插件在网站上创建自定义滚动条。这样可以正常工作，除非它可以执行某种缓动/平滑滚动会很好。该插件似乎没有这个选项，我想知道还有其他方法可以实现吗？

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

Answer 1

如果你想使用nanoScrollbar并且仍然希望为滚动设置动画，你可以为内容的默认（浏览器）滚动条设置动画，nanoScrollbar会在收听内容的滚动事件时为模拟滑块设置动画。

下面是动画滚动到底部的代码

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

希望这可以帮助那些正在寻找替代解决方案的人。

Answer 2

nanoScroller使用本机滚动行为，它不会模拟它。因此，如果浏览器不支持平滑滚动，nanoScroller也不支持它。要进行平滑滚动，您必须使用自定义滚动条来模拟使用动画/缓动滚动。有很多滚动条插件可以模拟滚动（并支持滚动动画）：jScrollPane，Malihu Custom Scrollbar，Perfect Scrollbar，slimScroll等。您可以查看this document以比较滚动条并选择所需的滚动条。查看类型为“模拟器”的滚动条

nanoScroller.js具有平滑滚动

2 个答案: