Javascript 防止在刷卡时垂直滚动-vanilla JS

我写这段代码是为了为图像滑块添加滑动功能。滑块工作正常

但是，当我执行向右或向左滑动时，会出现一些垂直滚动，这会分散注意力，让人恼火

我正在触摸对象中存储对touchstart的引用

在touchend事件中，如果垂直距离（lenY）大于50，则触发touchstart上的默认值

这不管用

最简单的选择是直接在touchStart上调用preventDefault。但是图像滑块占据了移动屏幕的很大一部分，使得向下滚动页面变得很棘手

我需要将lenY（垂直距离）传递给touch start处理程序以防止默认操作

function triggerTouch() {
    "use strict";
    var tZone = document.getElementById('sl-m'),
        touch = {},
        startX = 0,
        startY = 0,
        endX = 0,
        endY = 0;

    if (tZone) {
        tZone.addEventListener('touchstart', function (e) {
            startX = e.changedTouches[0].screenX;
            startY = e.changedTouches[0].screenY;

            // store reference to touch event
            touch.start = e;
        }, false);

        tZone.addEventListener('touchend', function (e) {
           endX = e.changedTouches[0].screenX;
           endY = e.changedTouches[0].screenY;

           var lenX = Math.abs(endX - startX);
           var lenY = Math.abs(endY - startY);

           // check if user intended to scroll down
           if (lenY < 50 && lenX > 50) {
                touch.start.preventDefault();
                e.preventDefault();
                swipe(tZone, startX, endX);
           }
        }, false);
    }
}

函数triggerTouch（）{
“严格使用”；
var tZone=document.getElementById（'sl-m'），
touch={}，
startX=0，
startY=0，
endX=0，
endY=0；
if（tZone）{
tZone.addEventListener（'touchstart'，函数（e）{
startX=e.changedTouches[0]。屏幕X；
startY=e.changedTouches[0].screenY；
//存储对触摸事件的引用
touch.start=e；
}，假）；
tZone.addEventListener（'touchend'，函数（e）{
endX=e.changedTouches[0]。屏幕x；
endY=e.changedTouches[0]。屏幕显示；
var lenX=Math.abs（endX-startX）；
var lenY=Math.abs（endY-startY）；
//检查用户是否打算向下滚动
如果（lenY<50&&lenX>50）{
touch.start.preventDefault（）；
e、 预防默认值（）；
轻扫（tZone、startX、endX）；
}
}，假）；
}
}

由于我还没有得到答案，我现在发布我自己的答案，希望有人能提供正确的实现

我最终使用css溢出属性暂时禁用垂直滚动

虽然有一个小的副作用，但这是非常有效的。滑动图像滑块后，滚动将被禁用

需要向上滑动以恢复滚动到页面。这并不明显，但我仍然想找到正确的方法

var touch = {};

window.onload = function () {
    "use strict";
    document.body.addEventListener("touchstart", touchHandler);
    document.body.addEventListener("touchend", touchHandler);
};

function touchHandler(e) {
    "use strict";

    var el = e.target;

    if (el.parentNode.id === "sl-m") {
        if (e.type === "touchstart") {
            touch.startX = e.changedTouches[0].screenX;
            touch.startY = e.changedTouches[0].screenY;
        } else {
            touch.endX = e.changedTouches[0].screenX;
            touch.endY = e.changedTouches[0].screenY;

            touch.lenX = Math.abs(touch.endX - touch.startX);
            touch.lenY = Math.abs(touch.endY - touch.startY);

            if (touch.lenY < 20) {
                // disable scroll
                document.body.style.overflowY = "hidden";

                // do swipe related stuff
                swipe(el.parentNode);
            } else {
                // enable scroll if swipe was not intended
                document.body.style.overflowY = "scroll";
            }
        }
    } else {
        // keep scroll enabled if touch is outside the image slider 
        document.body.style.overflowY = "scroll";
    }
}

var-touch={}；
window.onload=函数（）{
“严格使用”；
document.body.addEventListener（“touchstart”，touchHandler）；
document.body.addEventListener（“touchend”，touchHandler）；
};
函数touchHandler（e）{
“严格使用”；
var el=e.target；
如果（el.parentNode.id==“sl-m”）{
如果（例如，类型==“touchstart”）{
touch.startX=e.changedTouches[0]。screenX；
touch.startY=e.changedtouchs[0]。屏幕；
}否则{
touch.endX=e.changedTouches[0]。screenX；
touch.endY=e.changedTouches[0]。屏幕显示；
touch.lenX=Math.abs（touch.endX-touch.startX）；
touch.lenY=Math.abs（touch.endY-touch.startY）；
如果（触屏时间<20）{
//禁用滚动
document.body.style.overflowY=“隐藏”；
//刷相关的东西吗
滑动（el.parentNode）；
}否则{
//如果不打算刷卡，则启用滚动
document.body.style.overflowY=“滚动”；
}
}
}否则{
//如果触摸在图像滑块外，则保持滚动启用
document.body.style.overflowY=“滚动”；
}
}

我想分享适合我的解决方案。上述解决方案在ios上不起作用。我为我的英语感到抱歉。我不懂英语

function stop(e){
e=e || event;
e.preventDefault;
}
window.onscroll=stop(); //-->Yes, we will use it ..

例如，您将在何处使用

function move(event){

var finish=event.touches[0].clientX;
var verticalFinish=event.touches[0].clientY;
var diff=finish-strt;
var verticalDiff=verticalStrt-verticalFinish;
var f;

if(diff<0 && (Math.abs(diff)>Math.abs(verticalDiff)/3)){
    f=verticalDiff+widthOffset;
slayt[x].style.left=diff+"px";
slayt[x].style.transition="none";
slayt[y].style.left=f+"px";
slayt[y].style.transition="none";

  window.onscroll=stop(); //-->we used it here :)

  } 

else if(diff>0 && (Math.abs(diff)>Math.abs(verticalDiff)/3)){
    f=diff-widthOffset;
slayt[x].style.left=diff+"px";
slayt[x].style.transition="none";
slayt[z].style.left=f+"px";
slayt[z].style.transition="none";

  window.onscroll=stop();//-->we used it here :)

    }
 }

如果有用，我会很高兴

更新： 我打错了。我想修理。实际上，滚动事件很不幸无法取消。所以我们在上面取消的事件，scroll不是垂直滚动事件。所有事件

window.onscroll=stop(); // ==>improper use
stop(); // ==> actually - Correct usage

它只需要写入，所以停止（）

---

您尝试过这个吗？

您没有在

touchstart

上为

endY

或

startY

赋值，所以它们都保持

0

。哦，我实际上忘了在这里添加它。失败后我退缩了。但这并不能阻止滚动。事件touchstart和touchend不足以实现您想要的。您必须使用touchmove在触摸时识别用户是否向左/向右或向上/向下拖动。然后只允许一个方向。嗨，macitsamet，谢谢你的代码，我会查出来的。实际上，我最终使用了SwipeJs-。您可能会发现阅读代码很有用。我不得不修改和删除一些多余的功能，以满足我的需要，但它就像一个魅力。

window.onscroll=stop(); // ==>improper use
stop(); // ==> actually - Correct usage

html,
body {
     overflow: hidden;
}