7

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.

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.

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.

Could anyone help me out?

Thanks a lot

4

4 回答 4

7

我用这种方式！

var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                //desktop               
                $.fn.fullpage();
            }
        });
于 2014-04-04T06:19:31.997 回答
6

只是不要在触摸设备上初始化整页。您将不得不处理移动/触摸设备检测。只需在谷歌上搜索一下，甚至在这里找到不同的选择。

它应该如下所示：

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选项。这样 fullpage.js 将在给定值（以 px 为单位）下像普通网站一样运行。

这也可以与类结合使用，fp-auto-height-responsive以防止 fullPage.js 将部分高度设置为响应式并让您完全控制它们。

有关如何在移动设备上禁用 fullpage.js的更多信息，请参阅文档或此帮助中心文章。

于 2014-03-17T15:58:54.400 回答
3

我在 Stackexchange 上遇到的更简单的方法- 这就是我正在使用的：

if(screen.width < 480) { 
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
于 2014-05-19T21:22:03.440 回答
1

fullPage.js自上次回答以来，已添加响应式设计可能性。您可以通过以下链接查看示例。

阅读关于responsiveWidth和responsiveHeight在文档中了解详细信息。

于 2017-08-01T08:41:23.607 回答