整页.js触摸滚动固定元素

FullPage.js touch scrolling over fixed element

本文关键字：元素 滚动 js 触摸 整页      更新时间：2023-09-26

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

当固定的div 位于整页容器外部时，即使它们位于内部，也存在此问题。我正在使用"固定元素"参数表：

fixedElements: '.circleWrapper',

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

所以我尝试在整页.js配置上css3: false但没有让它工作，所以我找到了简单的解决方案来使用

pointer-events: none;

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

整页.js触摸事件只能在插件的包装器本身内工作。通常人们不希望在页眉或页脚上滑动会滚动页面。

您有两种选择：

    使用

  • css3:false 并将固定元素放置在 fullpage.js 容器中，这样它们就会收到滑动事件，并且不会在包装器内造成问题，因为插件不会使用 translate3d 属性。

  • 修改整页.js以实现自己的目的。为此，请修改函数addTouchHandler和removeTouchHandler并更改$(document)的$(WRAPPER_SEL)：

    /**
* 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);
    }
}
相关文章：