使用 owl carousel 时禁用触摸设备上的垂直滚动

Question

在触摸设备上从左到右拖动水平旋转木马时，它还允许上下拖动它，从而使整个页面晃动。如何禁用猫头鹰轮播上的垂直滚动。 如果有人可以提供帮助，我可以发布 js 文件

提前致谢

Answer 1

这似乎对我有用，至少在 iOS 上，尚未在 Android 上测试过。

当您开始使用鼠标或触摸滑动时，我看到 Owl Carousel 将 .owl-grab 类添加到滑块中。然后我从@Turnerj 找到了这段代码，然后将 .owl-grab 放入代码中。

Disable scrolling when touch moving certain element

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

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e) {
    if ($(e.target).closest('.owl-grab').length == 1) {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function() {
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e) {
     if (blockMenuHeaderScroll) {
        e.preventDefault();
     }
});

Answer 2

很棒的 css3 :)

.owl-carousel
{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

Answer 3

.owl-carousel 
{
-ms-touch-action: pan-x;
touch-action: pan-x; 
}

这对我有用，因为我只需要水平滚动。上面的代码限制了垂直滚动。

Answer 4

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

Answer 5

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

重要提示：将事件直接附加到 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) 上测试。

Answer 6

以上都不适合我。 但这行得通。

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

Answer 7

对@Giovanni Locombi 的回答进行了一些改进，以使触摸动作更流畅。适用于 iOS

使用来自https://hammerjs.github.io/的Hammer.js

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