Question

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

然而，当我执行向右或向左滑动时，会出现一些垂直滚动，这会让人分心并烦恼。

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

在touchend事件中，如果垂直距离（lenY）大于50，我会在touchstart上触发preventDefault。

这不起作用。

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

我需要将lenY（垂直距离）传递给触摸启动处理程序以防止默认操作。

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);
    }
}

Answer 1

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

我最终使用css overflow属性暂时禁用垂直滚动。

虽然副作用很小，但效果很好。在图像滑块中滑动后，滚动功能将被禁用。

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

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";
    }
}

Answer 2

html,
body {
     overflow: hidden;
}

您尝试过吗？

Answer 3

我想分享对我有用的解决方案。上述解决方案不适用于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 :)

    }
 }

但是有一个小问题。如果还有其他与滚动相关的功能，则取消。返回true；这是行不通的。如果我有一个与触摸端内外的滑块相关的功能，我也会写两次。

function end(event){
//"touchend" related codes...
//bla bla
window.onscroll=function(){m=window.pageYOffset;console.log(m);if(m>=850) 
{buton.style.display="block";}else{buton.style.display="none";}}
}

如果有用，我会很高兴...

更新： 我打错了。我要修复。实际上，不幸的是不能取消滚动事件。因此，我们在上方取消的事件滚动不是垂直滚动事件。所有事件。

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

它只需要写成stop（）。

在swipe -vanilla JS上防止垂直滚动

3 个答案: