2014-09-23 60 views
0

我有一个客户谁想要改变他们的网站的功能,使用户开始在网站的底部,并向下滚动向上导航。捕捉scrollwheel事件来改变向上/向下向上/向上

所以基本上,我需要一种方法来反转滚动功能,这样如果向下滚动,它就会向上滚动,反之亦然。

我做了一些研究,发现这个(How can I determine the direction of a jQuery scroll event?),这给了我什么,我有以下捕捉滚动事件:

 var lastScrollTop = 0; 
     $(window).scroll(function (event) { 
      var st = $(this).scrollTop(); 
      if (st > lastScrollTop) { 
       // downscroll code 
       alert("DOWN"); 
      } else { 
       // upscroll code 
       alert("UP"); 
      } 
      lastScrollTop = st; 
     }); 

这工作得很好,它标识如果用户向上或向下滚动。

但我不知道我能做些什么来:

  1. 停止默认的滚动和
  2. 滚动在另一个方向

任何人都知道我能做些什么吗?或者,如果有一种完全不同的方式来使用插件或不同的方法来做到这一点,我可以为任何事情做好准备。

+0

我很好奇 - 当用户开始“反向”滚动时,在什么时候启用“正常”滚动?在用户回到页面顶部之前,您是否会反转滚动?或者,你是否允许他们在一段时间后再次开始滚动?这是一个奇怪的互动... – Jack 2014-09-23 00:58:17

+0

@JackPattishall - 它永远不会回到正常的滚动。向下/向上总是向上/向下。是的,我同意奇怪的互动:)我想他们希望出现“你向下滚动,内容向下移动” – Steven 2014-09-23 01:01:39

+1

啊,我找到了你。对不起,我误解了你的要求。当你到达页面底部时,我确实认为你是反向滚动的!您的初始状态或起点是页面的底部?然后,当用户“向下滚动”时,页面会向上滚动? – Jack 2014-09-23 01:25:59

回答

1

这里有一个快速小提琴放在一起:

http://jsfiddle.net/fmwpuu9g/

基本上,你想捕捉的mousewheel事件(或DOMMouseScroll事件),并防止违约。

文档两种:

鼠标滚轮:https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel(大多数主流浏览器) DOMMouseScroll:https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll(火狐/壁虎)

不幸的是,你可以看到,它不是一个 “标准”,因此支持ISN没有保证....

有一点要指出的是,offset10px。虽然这是硬编码(可能是您的客户正在寻找的),但这并不理想 - 因为您预计会出现惯性。此外,这是用禁用“正常”滚动功能的MacBooK Pro进行测试的(滚动向上或向下滚动) - 所以我不确定这是如何影响三角洲的。

最后,如果希望删除滚动条,则只需抵消容器的top位置。

祝你好运!

+0

这太棒了!正是我在找什么。我不确定滚动条是否可见或不可见,但我不确定我是否了解您通过取消容器顶部位置的建议。我将如何修改? – Steven 2014-09-23 01:52:21

+1

嗨Steven!好人。关于滚动条 - 例如客户希望你隐藏滚动条。然后你操纵溢出(而不是滚动条) - 所以你偏移了'顶部'的位置。像这样的东西:http://jsfiddle.net/fmwpuu9g/1/ – Jack 2014-09-23 07:09:51