滚动时逐个元素跳跃

时间:2014-12-03 12:32:27

标签: javascript jquery html css

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

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

我不知道我是否解释得很好,这里有一个例子:http://orangina.eu/heritage

尝试滚动此网页,这就是我需要的。

谢谢!

3 个答案:

答案 0 :(得分:1)

如果我错了,请纠正我,但它看起来像你在尝试禁用浏览器默认滚动行为,附加事件以向上滚动并向下滚动并向上或向下滚动到高度页面的高度。

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

然后你可以绑定jQuery"鼠标滚轮"和#34; DOMMouseScroll"到div检查" event.originalEvent.detail> 0"或者" e.originalEvent.wheelDelta< 0"向下滚动或向上滚动。

最后在if或else中添加函数调用,具体取决于downscroll或upscroll。

如果您愿意,我可以编写代码,但如果您自己尝试,可能会对您有所帮助。

答案 1 :(得分:0)

使用jQuery的fullPage.js插件可以达到同样的效果。

  • 与旧版浏览器兼容,例如IE 8。
  • 触控兼容设备
  • 提高性能的CSS3动画
  • 很多选项,回调和方法。

答案 2 :(得分:0)

感谢所有回复!

我解决了我的问题,而不是使用标准滚动我使用了translateY css属性。每次我想向下/向上滚动时,为每个页面层设置数据ID并进行translateY(100%,200%,300%...)。