Scroll the content of a certain div in a jQuery-mobile 'page' and not the page itself

Question

I am using jQuery-mobile for an html based mobile app.

I use jQuery-mobile to horizontally scroll through pages with swipe.

One of my pages has a horizontally long div with some animated content. I need only the content of this div to scroll to the side. But when I swipe over the div, jQuery-mobile scrolls to the next page.

If the user swipes over any other part of the page, this is the desired behavior, but when a swipe occurs on that particular div, I need only the content to scroll.

I tried using iScrollView as suggested here and css overflow as suggested here but in each case, jQuery-mobile scrolls the page.

Is there way to only scroll the content of a certain div in a jQuery-mobile 'page' and not the page itself?

are you using swipeleft / swiperight? you can e.preventDefault() if e.target equals that div. — Omar
thank you @Omar. I tried it and it stopped the page from scrolling. But the div does not scroll either. — turzifer
Ok.I figured the div will scroll by adding overflow: scroll; to the container. — turzifer
@Omar, why do not you make your comment an answer, so that I can accept it? — turzifer

Omar Omar · Accepted Answer · 2013-12-27T23:14:46

You can preventDefault() or return false on swiping on a specific element and its' children.

Identify that element with a .class.

$(document).on("swipeleft swiperight", function (e) {
  if ($(e.target).hasClass("class") || $(".class").has(e.target).length) {
    /* true */
    return false;
  } 
  else {
    /* false */
    doSomething();
  }
});

Demo

Scroll the content of a certain div in a jQuery-mobile 'page' and not the page itself

1 Answers