如何一次滚动xx像素或％

Question

我正在建立一个网站，我想自定义滚动。如果用户滚动，我希望他们像在此网站中一样向下滚动100％：http://onlinedepartment.nl/

编辑：我已经使用锚点管理了平滑滚动。但我希望它也可以在mousescroll上工作

有什么想法吗？提前致谢

Answer 1

该网站非常好。 为了做到这一点，需要记住很多东西。 这是我在下面描述的所有内容的演示（fiddle）。

1. 每个＆＃34;页面＆＃34;高度与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. 然后，每次使用滚轮时，您都不想滚动多页。那么你可以设置例如滚动时阻塞变量为true（blocked = true），超时后将其重置为false setTimeout(function() { blocked = false; })，每次滚动时检查变量是否为blocked === false，然后执行滚动，否则在绑定到滚动事件的函数中不执行任何操作event.preventDefault()。

可能需要考虑更多的东西，但......

您可能知道这一点，但要将事件处理程序附加到scroll事件： $(document).on('scroll', function() { /*the code that should be run on the scroll event */})

编辑：您必须绑定到鼠标滚轮事件而不是滚动事件，以防止页面在侦听事件的函数内滚动event.preventDefault()。

EDIT2：这是一个演示http://codepen.io/Hatlen/pen/stubk。 有一点与codepen不兼容的是window.innerHeight不正确，所以div的高度与真实的window.innerHeight不同。

EDIT3：而不是保存window.pageYOffset并将新偏移量与滚动事件event.originalEvent.wheelDeltaY

中的方向进行比较