javascript - disable vertical scrolling on touch device while using owl carousel - Stack Overflow

admin管理员组

文章数量:1197358

when dragging horizontal carousel left to right on touch device it also allows it to be dragged up and down which jiggles the whole page around. How can I disable vertical scrolling on owl carousel. I can post the js file if anyone can help

Thanks in advance

when dragging horizontal carousel left to right on touch device it also allows it to be dragged up and down which jiggles the whole page around. How can I disable vertical scrolling on owl carousel. I can post the js file if anyone can help

Thanks in advance

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 2, 2017 at 1:08 in00b asked Apr 2, 2017 at 0:59 in00bin00b 10911 gold badge33 silver badges1010 bronze badges 3

• Welcome to SO. Please detail more your question, as written is too broad, primarly opinion based and subject to be closed soon. See here on how to ask question: link – dparoli Commented Apr 2, 2017 at 1:04
• Basically all I ask is how to disable vertical scrolling on owl carousel on touch device/mobile devices – in00b Commented Apr 2, 2017 at 1:09
• Hi, @in00b. Have you found an answer to your question? – Bahriddin Abdiev Commented May 2, 2018 at 23:19

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 7

Awesome css3 :)

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

This seems to work for me, at least on iOS, haven't tested on Android.

When you start sliding with mouse or touch I saw that Owl Carousel adds the class .owl-grab to the slider. I then found this code from @Turnerj and just put .owl-grab in the code.

Disable scrolling when touch moving certain element

It also works with multiple sliders on same page. Hope this helps! (I'm new to jQuery so there could probably be flaws to this solution)

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

Use hammer.js with addEventListner for Classes. I have tested with iOS (iphoneX) and Android (Nexus 5X) and work like a charme. I hope can help!

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

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

This worked for me as I need only horizontal scroll. Above code restricts the vertical scroll.

This will block vertical scrolling while dragging the image horizontally, or prevent the horizontal pan while trying to v-scroll the page itself.

Important: Attach the event directly to the IMG element.

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

Tested on android (Chrome) and ios(Safari).

Some improvements on @Giovanni Locombi's answer to make the touch actions smoother. Works on iOS

Using Hammer.js from https://hammerjs.github.io/

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

None of the above worked for me. but this worked.

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

本文标签： javascriptdisable vertical scrolling on touch device while using owl carouselStack Overflow