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

在带有class的addEventListner中使用Hammer.js。我已经在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 4

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

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

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

使用猫头鹰轮播时禁用触摸设备上的垂直滚动

7 个答案: