1

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

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

有任何想法吗？提前致谢

4

1 回答 1

2

那个网站很不错。要做到这一点，有很多事情要记住。这是我在下面描述的所有内容的演示（小提琴）。

  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在滚动时将例如阻塞的变量设置为 true ()，超时后将其重置为 false setTimeout(function() { blocked = false; })，每次滚动时检查变量是否存在blocked === false，然后进行滚动，否则您event.preventDefault()在函数绑定中什么也不做到滚动事件。

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

您可能知道这一点，但要将事件处理程序附加到滚动事件： $(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

于 2013-05-18T15:11:36.667 回答