用鼠標滾輪平滑滾動緩動效果

我最近遇到這個網站http://www.ascensionlatorre.com/home，我喜歡鼠標滾輪滾動的方式 - 緩動非常平滑。用鼠標滾輪平滑滾動緩動效果

我一直在搜索谷歌，但我找不到任何類似的東西。

有沒有人有任何建議如何複製這種效果與jQuery？

2012-02-04 idbranding

有很多東西在進行滾動，根據滾動的菜單導航，在不同時間出現/消失的部分等等，所以我認爲這對SO問題來說是非常全面的。試一試你的自我，然後回過頭來問一些你遇到困難的具體問題。 – 2012-02-04 16:48:37

爲什麼大拇指向下？我問了一個具體的問題，我想知道鼠標滾輪緩動是如何工作的。我在這裏學習，不要偷 – idbranding 2012-02-04 16:54:51

倒下是因爲我認爲這個問題過於寬泛。有一系列組件可以使它們的滾動順暢，並且在您滾動時自定義滾動條，平滑過渡等等時可以滑動分離的重疊內容。描述如何使用jQuery完成所有這些工作是爲了解決單個SO問題。 – 2012-02-04 17:04:10

好的隊友，我會嘗試幫助你的請求與一些材料。我爲自己找到了這個教程，希望它對你也有用。這形成你指的是網站的基本： http://johnpolacek.github.com/scrollorama/

2012-02-04 17:14:06 pansp

首先，感謝您的回覆。已經發現這個網站，divs的動畫不是問題。我喜歡的東西是使用鼠標滾輪的緩動效果。對此有何建議？ – idbranding 2012-02-04 17:20:18

是的，我知道該示例，它不支持_mousewheel easing_ – idbranding 2012-02-04 17:44:07

想知道您是否成功找到解決方案？我也在尋找類似的東西，無法通過Google尋找解決方案。 – DBUK 2012-05-09 12:32:01

我中有你問過同樣的問題。我訪問您提供的網站，並找出答案！

他們使用jquery.mousewheel.js，你可以使用Chrome的控制檯到找到腳本。只要搜索'鼠標滾輪'，你就可以找到一個叫'滾動'的功能。平滑滾動的原因是他們沒有使用jquery的動畫，但使用javascript的setInternal到使它。你可以從代碼中學習。

我相信你可以做到。

2012-09-11 13:16:45 Winters

我最近也遇到過這個問題，我也沒有找到很多支持，所以我很快就忘了這個問題。幾個月後，我看到了一個更好的平滑滾動例子，所以我進入了他們正在使用的JavaScript文件，並且發現他們正在使用名爲NiceScroll的jQuery文件。

我相信這就是我們一直在尋找的東西 - 簡單的平滑滾動div，iframe或其他，就像iOS的滾動。

2012-09-13 18:59:27 Dylan

這只是10行代碼，爲什麼有人要包含數百行代碼？這裏是 http://jsfiddle.net/7ZVb7/1383/ – 2013-09-07 06:40:33

@CameronA - 你的jsfiddle例子目前只能向下滾動而不是備份。另外，我確信有更好的js文件可以用較少的代碼行處理好滾動，但是這篇文章今天已經有一年了。 – Dylan 2013-09-13 15:22:48

這個鏈接是由某人編輯並得到了問題這是正確的;）http://jsfiddle.net/7ZVb7/1383/ – 2013-09-14 02:48:21

這絕對腳本退房。雖然它增加了一個自定義滾動條，但它是一個很好看的，你可以通過CSS編輯。

編輯我有一個工作演示，但由於託管和域更改已經刪除它，對此感到抱歉。

2013-02-02 20:34:47 hellojebus

鏈接不工作「建立數據庫連接時出錯」 – 2017-11-29 12:02:37

我還沒有潛入代碼，但我懷疑他們正在使用CSS3轉換。

transition: all 1s

在您的元素（當然是供應商的前綴）上，將從視差效果中消除動畫效果。

看起來他們似乎已經重寫了scrollWheel行爲，並且使每個勾號按照確定的量下到頁面上。至少我會這樣做。

2013-03-26 22:57:14 eighteyes

回答