防止整个页面在特定事件目标中滑动

问题描述

我正在为移动设备使用自定义的整页幻灯片效果，效果很好。这是代码：

function captureStartClientY(event) {
    startClientY = event.touches[0].pageY;
}
function captureEndClientY(event) {
    endClientY = event.touches[0].pageY;
}
function handleTouchWheel() {
    if(!unscrollable) {
        page.removeEventListener('touchmove',captureEndClientY);
        if(!endClientY) {
            return;
        }
        if(!isScrolling) {
            let diff = startClientY - endClientY;
            if (diff < -35) {
                if (i !== 0) {
                    scrollPrev();
                }
            } else if (diff > 35) {
                if (i < slides.length - 1) {
                    scrollNext();
                }
            }
            startClientY = undefined;
            endClientY = undefined;
            setTimeout( () => {
                isScrolling = false;
                console.log('TouchSlide enable');
            },throttleTime);
        } else {
            console.log('TouchSlide disabled');
        }
    }
}
page.addEventListener("touchstart",captureStartClientY,{capture: true,passive: true});
page.addEventListener("touchmove",captureEndClientY,passive: true});
page.addEventListener("touchend",handleTouchWheel,passive: true});

我希望当用户触摸页面指定区域中的屏幕时，这种行为会停止

我希望整页幻灯片在红色区域有效，但在灰色区域无效，但用户应该能够在灰色区域滚动。 到目前为止，这里使用的代码还不错，但有时会触发slide事件。 我认为我不正确地了解如何使用removeEventListener：

let aboutContent = document.querySelectorAll('.about--content-desc');
aboutContent.forEach( (element) => {
    element.addEventListener( 'touchstart',(event) => {
       event.stopPropagation();
       page.removeEventListener('touchstart',captureStartClientY);
       unscrollable = true;
       console.log(unscrollable);
       setTimeout( () => {
           unscrollable = false;
       },600);
    });
    element.addEventListener('touchmove',(event) => {
        page.removeEventListener('touchmove',captureEndClientY);
        event.stopPropagation();
        unscrollable = true;
        console.log(unscrollable);
        setTimeout( () => {
            unscrollable = false;
        },600);
    })
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）