如何创建平滑滚动效果？

Question

如何创建平滑滚动效果？

5

我在这个网站http://www.agileinfoways.com/上看到了一个不错的滚动效果，想知道如何实现。我之前从未见过这种效果，也不知道它叫什么。这种滚动几乎模仿了iOS平台上的UIScrollView。如果有关于创建此效果的建议，将非常有帮助。谢谢

- Michael

一个尝试的方法：使用已激活Firebug的Firefox访问该网站，并检查您感兴趣的元素。 - R Dub

1

一个值得尝试的事情：使用激活开发者模式并检查已使用的脚本，使用Chrome访问该网站。 - Roko C. Buljan

1

请不要使用基于Javascript的“平滑滚动”，因为它并不流畅，而且对于启用了平滑滚动功能的用户（例如移动用户、Firefox用户等），由于滚动速度明显不同，他们可能会遇到困难。但也许可以进行改进，我建议与http://ux.stackexchange.com/上的人交谈。 - Kroltan

@Kroltan 我会考虑这一点，但是网站将看到的98%的流量不会来自移动设备。感谢您提供的信息，我从未想过它会影响用户体验。 - Michael

1

噢，如果你有实际数据的话...但我认识一些人，当有一个网站“重新发明轮子”时，他们会真正生气（不仅仅是沮丧）。这些人肯定不会喜欢对他们习惯的东西进行更改。即使听起来很好，也要考虑到用户已经习惯了自己的方法或没有平滑滚动，只有在应用程序功能关键时才尝试强制使用这些选项。 - Kroltan

1

@Kroltan 是的，实现许多只有开发人员会注意到但可能会妨碍普通用户的“甜蜜”功能很容易，但找到平衡并保持设计的极简主义方法非常重要。 - Michael

2个回答

1

看到JavaScript包含文件，该网站正在使用jQuery.nicescroll，这是开发者网站：http://areaaperta.com/nicescroll/。

- Chase Rocker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Виктор Новиков · Accepted Answer

本站使用JQuery的NiceScroll插件

插件GitHub页面 - https://github.com/inuyaksa/jquery.nicescroll

您提供的初始化代码：

if (jQuery().niceScroll) {
    $("html").niceScroll({
        scrollspeed: 70, 
        mousescrollstep: 38, 
        cursorwidth: 15, 
        cursorborder: 0, 
        cursorcolor: '#464646', 
        cursorborderradius: 0, 
        autohidemode: false, 
        horizrailenabled: false
    });
}