在移动(触摸)设备上禁用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屋!