FullPage.js 触摸滚动固定元素

Question

我正在为我的网站使用 fullpage.js。我在 fullpage-container 上方有一个固定的（水平和垂直居中）元素，所以当我在我的移动设备上滑动该固定部分时，fullpage 无法识别触摸事件。滚动工作正常。

当固定的 div 位于整页容器之外时，即使它们位于内部，也会出现问题。我正在使用 'fixedElements' 参数：

fixedElements: '.circleWrapper',

我应该以某种方式将触摸事件绑定到整页容器吗？

Answer 1

fullpage.js 触摸事件仅在插件的包装器本身内有效。通常人们不希望在页眉或页脚上滑动会滚动页面。

你有两个选择：

使用 css3:false 并将固定元素放置在 fullpage.js 容器中，这样它们将接收滑动事件并且不会因为插件而导致包装器内部出现问题不会使用 translate3d 属性。

修改 fullpage.js 以实现您自己的目的。为此，修改函数 addTouchHandler 和 removeTouchHandler 并将 $(WRAPPER_SEL) 更改为 $(document):

/**
* Adds the possibility to auto scroll through sections on touch devices.
*/
function addTouchHandler(){
    if(isTouchDevice || isTouch){
        //Microsoft pointers
        var MSPointer = getMSPointer();

        $(document).off('touchstart ' +  MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
        $(document).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
    }
}

/**
* Removes the auto scrolling for touch devices.
*/
function removeTouchHandler(){
    if(isTouchDevice || isTouch){
        //Microsoft pointers
        var MSPointer = getMSPointer();

        $(document).off('touchstart ' + MSPointer.down);
        $(document).off('touchmove ' + MSPointer.move);
    }
}

Answer 2

所以我在 fullpage.js 配置上尝试了 css3: false 但没有成功，所以我找到了使用

的简单解决方案

pointer-events: none;

在我整页幻灯片前面的元素上。这是我找到的最简单的解决方案来解决我的问题。如果对我的实施有任何疑问，请提问！

FullPage.js 触摸滚动固定元素

FullPage.js touch scrolling over fixed element

javascript

jquery

scroll

fixed

fullpage.js