I want to disable scrolling for my entire jqm web app but if you try to scroll on a div with a certain class, then scrolling is allowed

So my scrolling div, .info has overflow:scroll applied to it and I have this script to try to detect if you're touching it

$('.info').bind('touchstart', function (e) {
    if (e.type == "touchstart") {
       return true; 
    } else {
        event.preventDefault();
    }
});
$(document).bind('touchmove', function () {
    event.preventDefault();
})

Right now, scrolling is turned off for the document but when I try to scroll my info div, it won't scroll.

Now I've seen a few post around this same idea, but mostly about to pinning an objects position so that when the document is scrolled, it stays in the same place.

I want to disable scrolling for my entire jqm web app but if you try to scroll on a div with a certain class, then scrolling is allowed

So my scrolling div, .info has overflow:scroll applied to it and I have this script to try to detect if you're touching it

$('.info').bind('touchstart', function (e) {
    if (e.type == "touchstart") {
       return true; 
    } else {
        event.preventDefault();
    }
});
$(document).bind('touchmove', function () {
    event.preventDefault();
})

Right now, scrolling is turned off for the document but when I try to scroll my info div, it won't scroll.

Now I've seen a few post around this same idea, but mostly about to pinning an objects position so that when the document is scrolled, it stays in the same place.

• javascript
• jquery
• html
• jquery-mobile

1 Answer 1

This is how I've been doing it:

$(document).on('touchmove', function(ev) {
 if ( !$(ev.target).closest('.is-scrollable').length ) {
    ev.preventDefault();
  }
})

Where .is-scrollable would be your class, .info in this case.

EDIT: to fix scrolling at top and bottom of scrollable div:

$('.is-scrollable').on('touchstart', function() {
    var el = $(this);
    if ( el.scrollTop() <= 0 ) {
      el.scrollTop(1);
    }
    if ( el.scrollTop() >= el[0].scrollHeight ) {
      el.scrollTop(el[0].scrollHeight - 1);
    }
});