Javascript 使用owl转盘时禁用触摸设备上的垂直滚动

在触摸设备上从左到右拖动水平旋转木马时，它还允许上下拖动，从而使整个页面抖动。如何在owl转盘上禁用垂直滚动。 如果有人能帮忙，我可以发布js文件

---

提前感谢

这似乎对我有效，至少在iOS上是这样，我还没有在Android上测试过

当你开始用鼠标或触摸滑动时，我看到猫头鹰转盘将class.Owl grab添加到滑块中。然后我从@Turnerj中找到了这段代码，并在代码中加入了.owl grab

它也适用于同一页面上的多个滑块。希望这有帮助！（我是jQuery新手，所以这个解决方案可能有缺陷）

很棒的css3:）

---

这对我来说很有效，因为我只需要水平滚动。上述代码限制垂直滚动。

将hammer.js与addEventListner一起用于类。 我已经用iOS（iphoneX）和Android（Nexus 5X）进行了测试，工作起来就像个魔术师。 我希望能帮上忙

window.blockMenuHeaderScroll = true;
        var mc = new Hammer(document);
        var classname = document.getElementsByClassName("elenco_image");

        mc.on("swipeleft swiperight panleft panright", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = true;
        });

        mc.on("swipeup swipedown panup pandown", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = false;
        });

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('touchmove', function(evt) {
                if (blockMenuHeaderScroll) {
                    evt.preventDefault();
                }

            }, {
                passive: false
            });
        }

window.blockMenuHeaderScroll=true；
var mc=新锤子（文件）；
var classname=document.getElementsByClassName（“elenco_图像”）；
mc.on（“swipeleft swiperight panleft panright”，功能（ev）{
console.log（ev.type+“检测到手势”）；
window.blockMenuHeaderScroll=true；
});
mc.on（“swipeup swipedown panup pandown”），功能（ev）{
console.log（ev.type+“检测到手势”）；
window.blockMenuHeaderScroll=false；
});
对于（var i=0；i

这将在水平拖动图像时阻止垂直滚动， 或者在尝试v形滚动页面时防止水平平移

重要事项：将事件直接连接到IMG元素

let blockScroll = false;
let blockPan = false;

$('.owl-carousel img').on('touchstart', '', ots);
$('.owl-carousel img').on('touchmove', '', otm);

let p0 = [0,0];

function ots(ev) { //save the first touch point
  p0 = [ev.touches[0].screenX, ev.touches[0].screenY];
  blockScroll = false;
  blockPan = false;
}

function otm(event){
    if(blockScroll)
      event.preventDefault(); //don't let the window v-scroll
    else if(blockPan)
    { //don't let OWL get the event and pan-x.
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
    else
    { //calculate distance from the first touch point on every move
      let t = event.touches[0];
      let dx = t.screenX - p0[0];
      let dy = t.screenY - p0[1];

      if( Math.abs(dx) > Math.abs(dy) )
      {
        blockScroll = true;
        event.preventDefault();
      }
      else
      {
        blockPan = true;
        event.stopPropagation();
        event.stopImmediatePropagation();
      }
    }
}

---

在android（Chrome）和ios（Safari）上进行测试。

以上这些都不适合我。 但这起作用了

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}

---

对@Giovanni Locombi的答案进行了一些改进，使触摸动作更加流畅。在iOS上工作

使用来自的Hammer.js

window.blockMenuHeaderScroll=false；
var mc=新锤子（文件）；
var classname=document.getElementsByClassName（“owl转盘”）；
mc.on（“swipeleft swiperight panleft panright”，功能（ev）{
window.blockMenuHeaderScroll=true；
});
mc.on（“盘端开关”，功能（ev）{
window.blockMenuHeaderScroll=false；
});
mc.on（“swipeup swipedown panup pandown”），功能（ev）{
window.blockMenuHeaderScroll=false；
});
对于（var i=0；i

欢迎来到SO。请详细说明您的问题，因为书面内容过于宽泛，主要基于意见，主题将很快结束。关于如何提问，请看这里：基本上我所问的就是如何在触摸设备/移动设备上禁用owl转盘上的垂直滚动。你找到问题的答案了吗？谢谢，这正是我需要的！这对我不起作用。使用OWLCarousel2.3.，上面的代码对我来说一点用处也没有。发布的另一个解决方案也是如此。我将CSS直接添加到源代码中。没有效果（事实上，pan-y已经在猫头鹰中使用）@Pointi Nice:）这个标题与垂直的@arminhierstetter有关这也适用于Vuetify的元素对我不起作用。这些事件甚至没有发生。当我向任一处理程序添加console.log时，它们都不会触发。不知道怎么了。

window.blockMenuHeaderScroll = true;
        var mc = new Hammer(document);
        var classname = document.getElementsByClassName("elenco_image");

        mc.on("swipeleft swiperight panleft panright", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = true;
        });

        mc.on("swipeup swipedown panup pandown", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = false;
        });

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('touchmove', function(evt) {
                if (blockMenuHeaderScroll) {
                    evt.preventDefault();
                }

            }, {
                passive: false
            });
        }

let blockScroll = false;
let blockPan = false;

$('.owl-carousel img').on('touchstart', '', ots);
$('.owl-carousel img').on('touchmove', '', otm);

let p0 = [0,0];

function ots(ev) { //save the first touch point
  p0 = [ev.touches[0].screenX, ev.touches[0].screenY];
  blockScroll = false;
  blockPan = false;
}

function otm(event){
    if(blockScroll)
      event.preventDefault(); //don't let the window v-scroll
    else if(blockPan)
    { //don't let OWL get the event and pan-x.
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
    else
    { //calculate distance from the first touch point on every move
      let t = event.touches[0];
      let dx = t.screenX - p0[0];
      let dy = t.screenY - p0[1];

      if( Math.abs(dx) > Math.abs(dy) )
      {
        blockScroll = true;
        event.preventDefault();
      }
      else
      {
        blockPan = true;
        event.stopPropagation();
        event.stopImmediatePropagation();
      }
    }
}

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}

    window.blockMenuHeaderScroll = false;
    var mc = new Hammer(document);
    var classname = document.getElementsByClassName("owl-carousel");

    mc.on("swipeleft swiperight panleft panright", function(ev) {
        window.blockMenuHeaderScroll = true;
    });

    mc.on("panend swipeend", function (ev){
        window.blockMenuHeaderScroll = false;
    });

    mc.on("swipeup swipedown panup pandown", function(ev) {
        window.blockMenuHeaderScroll = false;
    });

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('touchmove', function(evt) {
            if (blockMenuHeaderScroll) {
                evt.preventDefault();
            }

        }, {
            passive: false
        });
    }