如何在FullPage.js中启用水平滚动?

时间:2015-05-17 15:32:51

标签: javascript jquery css responsive-design fullpage.js

我的GPA Calculator网络应用程序完全正常运行。我希望它具有响应性,但似乎智能手机和平板电脑存在一些漏洞。

似乎对于平板电脑来说,内容适合桌面版,但是当您点击某个字段放大到该特定输入的页面时。之后,用户必须向右滚动才能访问所有其他输入字段......

Tablet Version when filling out the form

FullPage.js不允许这种类型的滚动,因为它会自动滑动到下一个水平页面:输出部分。

我确实希望我的结果和输入区域是两个不同的页面,我知道如何不存储数据的唯一方法是将它放在一个带有幻灯片功能的网页上。有没有办法在Fullpage.Js中启用水平滚动,或禁用幻灯片,除非他们按下某个按钮?有没有更好的方法来实现这一目标?

以下是网站:http://gpacalc.tk/

3 个答案:

答案 0 :(得分:2)

$('#fullpage').fullpage({
    css3: true,
    slidesNavigation: true,
    normalScrollElements: '.slide'

});


$('body').on('DOMMouseScroll mousewheel', function (e) {
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
      //scroll down
      $.fn.fullpage.moveSlideRight();
    } else {
      //scroll up
      $.fn.fullpage.moveSlideLeft();
    }
    //prevent page fom scrolling
    return false;
});

在“Alvaro”和“Alvaro”的帮助下http://jsfiddle.net/honk1/gWnNv/7/

答案 1 :(得分:1)

尝试对整个部分使用插件选项`colnames<-`(cbind(matrix, rowSums(`class<-`(matrix[,-1], 'numeric'))), c(colnames(matrix), 'Sums')) # col1 col2 col3 Sums #[1,] "Sp1" "1" "0" "0" "1" #[2,] "Sp2" "1" "0" "0" "1" #[3,] "Sp3" "1" "1" "0" "2" #[4,] "Sp4" "0" "1" "1" "2" ,然后在点击按钮时调用matrix = structure(c('Sp1', 'Sp2', 'Sp3', 'Sp4', 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1), .Dim = c(4L, 4L), .Dimnames = list(NULL, c("", "col1", "col2", "col3"))) 之类的函数。

答案 2 :(得分:-1)

为什么不使用css:overflow?

 .selector {
      overflow-x: scroll;
 }