我将 fullpage.js 插件用于单页营销网站。
我正在使用导航链接跳转到站点周围的场景(全水平),因此我想禁用触摸/滑动(场景之间)功能,因为它会干扰其他触摸元素。
我一直在阅读所有文档,但我不知道如何实现这一点。
欢迎任何帮助。谢谢,杰克。
我将 fullpage.js 插件用于单页营销网站。
我正在使用导航链接跳转到站点周围的场景(全水平),因此我想禁用触摸/滑动(场景之间)功能,因为它会干扰其他触摸元素。
我一直在阅读所有文档,但我不知道如何实现这一点。
欢迎任何帮助。谢谢,杰克。
只需autoScrolling:false
在初始化插件时使用该选项。这样鼠标滚轮不会滑动,触摸事件也不会。
如果您想保持鼠标滚轮滚动(对于计算机)但禁用触摸事件(触摸设备),那么我建议您以不同的方式为触摸设备初始化插件。为了做到这一点,我建议你做这样的事情。
您可以使用 optionsresponsiveWidth
或responsiveHeight
以及 class fp-auto-height-responsive
。
这些选项将禁用指定尺寸下移动设备的自动滚动功能。examples
fullPage.js 或online文件夹中提供的示例。
您还可以使用responsiveSlides
并强制将水平幻灯片转换为响应式垂直部分。这可以通过响应式幻灯片扩展来完成。
$.fn.fullpage.setAllowScrolling
也可以用于同样的目的。它将禁用触摸滚动和鼠标滚动。
autoScrolling:false
仅禁用垂直滚动。如果您还想禁用水平的,现在没有办法做到这一点。您需要对插件进行一些修改。
在 fullpage.js 中替换了这个:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
为了这:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
afterRender
然后,当您初始化插件时,在回调中调用该公共函数,如下所示:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
不要调用 fullpage 两次。只需afterRender
在初始化中添加函数即可。
setAllowScrolling 函数还接受方向的第二个参数,因此以下可用于禁用左/右滚动/滑动:
$.fn.fullpage.setAllowScrolling(false, 'left, right');
截至 2017 年 6 月,以前的方法都不适合我。我发现有效禁用触摸的最简单方法如下。
在 jquery.fullPage.js 你会发现函数setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
当 fullpage 初始化时,它会自动调用setAllowScrolling(true)
,触发上述else if(value)
条件。只需将调用注释掉addTouchHandler()
即可完全禁用它,或添加某种条件以使其被调用,例如
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
使用这种方法,左箭头和右箭头在点击时仍然有效,因此仍然可以导航水平幻灯片。应该注意的是,使用$.fn.fullpage.setAllowScrolling(false, 'left, right');
也会禁用箭头。