在移动(触摸)设备上禁用fullpage.js [英] Disable fullpage.js on mobile (touch) devices

问题描述

我正在使用fullpage.js和slimscroll.js插件，这是允许滚动到内容超出其容器部分高度的部分所必需的.

I'm using fullpage.js and the slimscroll.js plugin, which is required to allow scrolling in a section which has content that exceeds the height it's container section.

我注意到在触摸设备上的体验非常糟糕.通常情况下，只要手指离开触摸区域，就可以在苗条滚动div上滑动，释放并观看页面仍在滚动，

I've noticed that the experience is quite bad on touch devices. Whereas normally you can swipe, release and watch the page still scroll, on a slimscroll div as soon as your finger leaves the touch area, the scrolling stops.

所以我想做的是在手机和平​​板电脑上禁用fullpage.js，但仍然在台式机上启用它.我检查了fullPage.js的问题和文档，但找不到简单的方法.

So what I'd like to do is disable fullpage.js on mobiles and tablets, but still enable it on desktops. I checked out fullPage.js's issues and documentation but I couldn't find a simple way of doing this.

有人可以帮我吗?

非常感谢

推荐答案

仅不要在触摸设备上初始化整页. 您将不得不处理移动/触摸设备检测.只需在Google上甚至在这里搜索一下，即可找到其他选择.

Just don't initialize fullpage on touch devices. You will have to deal with the mobile/touch devices detection. Just search a bit on google or even here to find different alternatives.

它应该看起来像这样:

var isPhoneDevice = [ WHATEVER FUNCTION YOU WANT TO USE ]

//if it is not a phone device...
if(!isPhoneDevice){
    //initializing fullpage...
    $.fn.fullpage();
}

更新

目前，fullpage.js提供了另一种选择.使用responsiveWidth和responsiveHeight选项. 这样，在给定值(以px为单位)下，fullpage.js将充当普通网站.

UPDATE

At the moment fullpage.js provides another alternative. Using the responsiveWidth and responsiveHeight options. This way fullpage.js will act as a normal website under the given values (in px).

这也可以与类fp-auto-height-responsive结合使用，以防止fullPage.js在响应时设置各节的高度，并让您完全控制它们.

This can also be combined with the class fp-auto-height-responsive in order to prevent fullPage.js to set the sections height on responsive and let you total control over them.

文档中的更多 .

这篇关于在移动(触摸)设备上禁用fullpage.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！