使用鼠标滚轮平滑滚动缓动效果[关闭]

Posted 2023-04-13

【中文标题】使用鼠标滚轮平滑滚动缓动效果[关闭]

【英文标题】：Smooth scrolling easing effect with mouse wheel [closed]

【发布时间】：2012-02-26 21:18:27

【问题描述】：

我最近看到了这个网站http://www.ascensionlatorre.com/home，我喜欢鼠标滚轮滚动的工作方式 - 缓动非常流畅。

我一直在谷歌搜索，但找不到类似的东西。

有人对如何用 jQuery 复制这种效果有任何建议吗？

【问题讨论】：

滚动会发生很多事情，根据滚动进行菜单导航，在不同时间出现/消失的部分等等。所以我认为对于一个 SO 问题来说，这还远远不够全面.亲自尝试一下，然后回来询问有关您在此过程中遇到的问题的具体问题。

为什么不赞成？我问了一个具体问题，我想知道鼠标滚轮缓动是如何工作的。我是来学习的，不是来偷窃的

否决票是因为我认为这个问题过于宽泛。有一系列组件可以使它们的滚动平滑，重叠的内容在您滚动时会分开，自定义滚动条，平滑过渡等等。描述如何使用 jQuery 完成所有这些操作是对单个 SO 问题的全面介绍。

好的，我明白了，但我唯一想知道的（让我指明方向）是鼠标滚轮的缓动，而不是你提到的所有其他效果。

可能重复：***.com/questions/5560714/…

【参考方案1】：

我最近也遇到了这个问题，但我没有找到很多支持，所以我很快就忘记了这个问题。几个月后，我看到了一个更好的平滑滚动示例，所以我进入并挖掘了他们使用的 javascript 文件，发现他们使用的是一个名为 NiceScroll 的 jQuery 文件。

我相信这就是我们一直在寻找的东西——div、iframe 等的简单平滑滚动，就像 ios 滚动一样。

http://areaaperta.com/nicescroll/

【讨论】：

只有10行代码，为什么有人要包含数百行代码？这里是jsfiddle.net/7ZVb7/1383

@CameronA - 您的 jsfiddle 示例当前仅向下滚动而不是向后滚动。另外我确信有更好的 js 文件可以用更少的代码来处理漂亮的滚动，但是这篇文章今天已经有一年了。

该链接由某人编辑并出现问题，它是正确的；）jsfiddle.net/7ZVb7/1383

我再次检查，我的链接工作正常，上下滚动具有轻松效果和android效果

我不知道为什么我检查了在 3 台计算机上，只需检查我的堆栈溢出配置文件，我包括我自己的 fb，在 facebook 上给我发一条消息，然后我会给你发一封电子邮件，例如： )

【参考方案2】：

http://areaaperta.com/nicescroll/

这绝对是要检查的脚本。虽然它添加了一个自定义滚动条，但它看起来很漂亮，您可以通过 css 进行编辑。

编辑 我有一个可用的演示，但由于托管和域更改而将其删除，对此感到抱歉。

【讨论】：

链接不工作“建立数据库连接时出错”

【参考方案3】：

好的，伙计，我会根据您的要求提供一些材料来帮助您。我为自己找到了这个教程，希望它对你也有用。这构成了您所指网站的基础： http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

【讨论】：

首先感谢您的回复。已经找到这个网站，div的动画不是问题。我喜欢的是使用鼠标滚轮的缓动效果。有什么建议吗？

是的，我知道那个例子，它不支持 mousewheel easing

想知道您是否成功找到了解决方案？我也在寻找类似的东西，但无法通过 Google 找到解决方案。

manos.malihu.gr/tuts/jquery_custom_scrollbar.html - 这个最接近

请检查我的小提琴也只有 10 行代码还有移动效果:) jsfiddle.net/7ZVb7/1383

【参考方案4】：

我也有同样的问题。我访问了您提供的网站并找到了答案！

他们使用 jquery.mousewheel.js，你可以使用 Chrome 的控制台来 找到脚本。只需搜索“鼠标滚轮”，您就可以找到一个功能 称为“滚动”。平滑滚动的原因是它们 没有使用 jquery 的动画，而是使用 javascript 的 setInternal 来 做了。你可以从代码中学习。

我相信你能做到。

【参考方案5】：

我没有深入研究代码，但我怀疑他们使用的是 CSS3 过渡。

transition: all 1s

在您的元素上（当然是供应商前缀），将从视差效果中平滑动画。

似乎他们已经覆盖了 scrollWheel 行为，并使每个刻度在页面上向下移动了一个确定的数量。至少我会这样处理。