如何滾動xx像素或％一次

Question

我正在構建一個網站，我想自定義滾動。如果用戶滾動，我希望他們一次向下滾動100％，就像這個網站一樣：http://onlinedepartment.nl/

編輯：我已經管理與錨點順利滾動。但我希望它可以在mousescroll上工作

任何想法？在此先感謝

Answer 1

該網站是相當不錯的。 有很多東西要記住要做到這一點。 下面是我在下面描述的所有事情的演示（fiddle）。

1. 每一個「頁面的」高度高達window.innerHeight - /* the height of the menu */

2. 您滾動你必須檢查是否向上或向下滾動你可以做的每一次，通過對每一個滾動更新變量事件的值爲window.pageYOffset，並檢查新值是高於還是低於此值，如果值高於滾動值。如果event.originalEvent.wheelDeltaY > 0您正在向上滾動。事件是滾動事件。

3. 然後在每次向下（向上）滾動時，您都需要向下或向上滾動一頁的高度。你可以有一個變量保存你正在打開的頁面，或者你可以看到當前window.pageYOffset對應的頁面數量。滾動你$('body').animate({scrollTop: /*page height*/ * /* the page number - 1 (to get it zero based) */})

4. 然後，你不想滾動多個頁面，每次你使用滾輪。那麼你可以設置例如一個被鎖定的變量爲真（blocked = true），當你滾動時和超時後，你重置爲假setTimeout(function() { blocked = false; })和每次你滾動你檢查，如果變量是blocked === false然後你做滾動，否則你什麼都不做event.preventDefault()綁定到函數滾動事件。

很可能有更多的東西需要考慮，但...

你可能知道這一點，但將事件處理程序附加到滾動事件： $(document).on('scroll', function() { /*the code that should be run on the scroll event */})

編輯：你必須綁定到mousewheel事件而不是滾動事件，以便能夠防止頁面在偵聽事件的函數內部滾動到event.preventDefault()。

編輯2：這是演示http://codepen.io/Hatlen/pen/stubk。 有一件事情沒有與codepen一起工作的是，window.innerHeight是不正確的，所以div的高度是不一樣的真正window.innerHeight。

EDIT3：如果不想保存window.pageYOffset和比較新的偏移，你可以從滾動事件event.originalEvent.wheelDeltaY