disable vertical scrolling on touch device while using owl carousel

Question

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

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](https://stackoverflow.com/help/how-to-ask) — dparoli, Apr 02 '17 at 01:04
Basically all I ask is how to disable vertical scrolling on owl carousel on touch device/mobile devices — in00b, Apr 02 '17 at 01:09

score 7 · Answer 1 · answered Dec 28 '17 at 13:09

7

Awesome css3 :)

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

answered Dec 28 '17 at 13:09

Yasin UYSAL

571
6
11

Thanks, thats exactly what I needed! – Pointi Mar 19 '18 at 13:11
This does not work for me. Using owl carousel 2.3., and the code above does nothing for me at all. Same for the other solution posted. I added the CSS directly to the source code. No effect (actually, pan-y is already used in the owl) – Armin Hierstetter Apr 23 '18 at 13:11
@Pointi Nice :) – Yasin UYSAL Aug 01 '18 at 12:53
This title is related to vertical @ArminHierstetter – Yasin UYSAL Aug 01 '18 at 12:55
This applies also to element of Vuetify – George Bikas May 26 '20 at 09:43
Genius! Still a valid answer after almost 6 years man. – Moayad .AlMoghrabi Jun 05 '23 at 14:19

score 4 · Answer 2 · answered Jun 28 '17 at 11:20

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

Does not work for me. The events do not even fire. When I add a console.log to either handler, they never fire. Not sure what's wrong. — Armin Hierstetter, Apr 23 '18 at 13:12

score 3 · Answer 3 · answered Sep 09 '18 at 09:32

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

score 2 · Answer 4 · answered Apr 03 '18 at 09:46

2

.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.

answered Apr 03 '18 at 09:46

TRIKONINFOSYSTEMS

530
7
19

Perfect, I can confirm this works :) – nsilva Jul 12 '23 at 09:19
Glad it works !! – TRIKONINFOSYSTEMS Aug 19 '23 at 06:11

Tim K · Answer 5 · 2020-03-11T11:01:14.220

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).

score 1 · Answer 6 · answered Jan 22 '21 at 12:36

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

I have tried so many solutions , but above works well for me. thanks — Rohit Goel, May 31 '22 at 16:00

score 0 · Answer 7 · answered Aug 25 '20 at 13:09

0

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

answered Aug 25 '20 at 13:09

Sanan Ali

2,349
1
24
34

disable vertical scrolling on touch device while using owl carousel

7 Answers7