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, Dec 26 '13 at 18:03
thank you @Omar. I tried it and it stopped the page from scrolling. But the div does not scroll either. — turzifer, Dec 27 '13 at 15:20
Ok.I figured the div will scroll by adding `overflow: scroll;` to the container. — turzifer, Dec 27 '13 at 15:43
@Omar, why do not you make your comment an answer, so that I can accept it? — turzifer, Dec 27 '13 at 21:28

score 0 · Accepted Answer · answered Dec 27 '13 at 23:14

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 Answers1