只需在鼠标+触控板上使用快照滚动触发/模拟滑动手势

时间:2017-01-25 11:07:43

标签: javascript html web

我的项目宽度为100%&高度面板,并希望自定义动画在它们之间转换。

这些过渡应该通过触摸和鼠标设备上的垂直滑动来触发 - 我知道鼠标/触控板不支持滑动,这就是所需插件到位的地方。

Onepage scrollfullPage.js完全按照我需要的方式处理卷轴,但是还有许多我不能拥有的东西。

所以我正在寻找一个仅处理滑动部分的插件或强大的方式来自行处理滑动触发器。

重要要求:手机上会有灯箱自然滚动。所以我需要这些手势的开/关切换。如果我自己编码,这将很容易。在现有插件中解决不会是 -

http://alvarotrigo.com/fullPage/ http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html

由于

编辑Alvaros答案

lethargy.js似乎很有希望,但我无法让它工作(或完全误解应该发生的事情)

我有一个空白页面,只是使用默认选项复制了它的Github页面示例中的代码。

var lethargy = new Lethargy();

$(window).bind('mousewheel DOMMouseScroll wheel MozMousePixelScroll', function(e){
    e.preventDefault()
    e.stopPropagation();
    if(lethargy.check(e) !== false) {
        console.log(lethargy.check(e));
    }
});

奇怪的是,在向上和向下滑动之间切换时,我得到以下日志:

False shouldnt even be there?

根据我的理解,每次刷卡只应该-11。单次滑动不能false而不是多个1-1 s。但那就是发生的事情。

1 个答案:

答案 0 :(得分:0)

如果您尝试自己制作,那么您将面临的两个最大问题是:

1 - 动态滚动笔记本电脑和一些鼠标,如Apple鼠标。

2-触摸设备。

因此,您可以将fullPage.js与空部分和您自己使用回调或fullPage.js状态类设置的固定元素一起使用。如in this sitethis other one所示。两者都使用fullPage.js。

另一种选择是使用像lethargy.js这样的东西试图通过动态滚动解决问题。虽然它不涉及触控设备。

更新

如果您阅读lethargy.js docs,您会看到这些值的含义:

  

如果是正常的向上滚动事件,则lethargy.check(e)将返回1;如果是正常的向下滚动事件,则返回-1;如果是惯性滚动,则返回false。

因此,false的结果显示了您不想使用的动态滚动。 您只需关心1-1即可。