我需要像jquery.fullPage一样组织导航:当我滚动一次时 - 我转到下一部分。
我尝试使用jquery.mousewheel,但在MacOS中使用触控板或触控板或APPLE Magic Mouse失败:它每卷滚动多个幻灯片。
我尝试使用此解决方案:https://github.com/jquery/jquery-mousewheel/issues/36#issuecomment-67648897
它在Chrome中运行良好,但它不在FF中,并且在Safari中存在错误。
这是问题的简单演示: http://jsfiddle.net/ss5LueLx/13/
$slider.on('mousewheel', function(event) {
if (event.deltaY>0) {
slider.prevSlide();
} else {
slider.nextSlide();
}
});
答案 0 :(得分:0)
我在SeaMonkey浏览器中测试了这个语句,但它失败了。
var delta = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;
为了以防万一,我查看deltaY并且它可以工作:在一个方向上+1,在另一个方向上-1,正如您在其他两个实现中所确定的那样。
console.log(e.deltaY); // view console in FireBug
查看Firebug中的事件结构,我可以看到事件类型是“mousewheel”,但我在originalEvent中看不到wheelData字段。
尽管有一个详细信息字段,但该字段仍然为零。
我想你只有在达到+/- 3时才试图进入下一个项目。我建议做一些事情来完成这个壮举:
// somewhere, initialize to zero
var current_position = 0;
// on mousewheel events
current_position += e.deltaY;
// you had a x 40 which would indicate that the limit is about 120 / 40
// if 3 is too small, you can always increase it to 5 or event 10...
if(current_position <= -3)
{
slider.nextSlide();
current_position = 0;
}
else if(current_position >= 3)
{
slider.prevSlide();
current_position = 0;
}
否则,您可以验证您的allowScroll
标记是否按预期工作。我没有这样编程对象所以我不太确定它是否正确。 (我使用prototype
语法,如果你想扩展类,这个语法非常有用。)