滚动时逐个元素跳转

Jumping element by element when scrolling

本文关键字：元素 滚动      更新时间：2023-09-26

我有两个div，带有视口的总高度和一个按钮，用于使用ScrollTo jquery插件从一个滚动到另一个。问题是我想防止手动滚动的可能性。

我希望当有人向下滚动鼠标时，浏览器会自动滚动到第二个视图，当我滚动到顶部时会获取上一个视图。

我不知道我解释得好不好，这里有一个例子：http://orangina.eu/heritage

尝试在此网页中滚动，这就是我需要的。

谢谢！

如果我

错了，请纠正我，但在我看来，您正在尝试禁用浏览器的默认滚动行为，附加事件以向上滚动和向下滚动以及向上或向下滚动到页面高度的高度。

我这样做的方法是禁用浏览器的默认滚动行为，overflow:hidden到正文和 html。

然后，您可以将 jQuery "mousewheel" 和 "DOMMouseScroll" 绑定到div 检查 "event.originalEvent.detail> 0" 或 "e.originalEvent.wheelDelta <0" 以进行向下滚动或向上滚动。

最后，在 if 或 else 中添加您的函数调用，具体取决于向下滚动或向上滚动。

如果你愿意，我可以编写代码，但如果你自己尝试一下，它可能会对你更有帮助。

你可以

通过使用 fullPage.js jQuery 插件来实现同样的效果。

  • 与IE 8等旧浏览器兼容。
  • 兼容触摸设备
  • CSS3 动画提高性能
  • 很多选项，回调和方法。

感谢所有回复！

我

解决了我的问题，而不是使用标准滚动，我使用了 translateY css 属性。为每个页面层设置一个数据 id，并在每次我想向下/向上滚动时进行翻译Y（100%，200%，300%...）。

相关文章：