title: Conditionally block scrolling/touchmove event in mobile safari
body: <p>iOS 5 now allows native overflow: scroll support.</p>
  
  <p>What I'd like to do is disable the <code>touchmove</code> event for everything except elements that have the 'scrollable' class or their children.</p>
  
  <p>But I can't seem to get it to work; this is what I've been working with below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .scrollable {
   height: 5em;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
  }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  // doesn't seem to work
  var handleMove = function (e) {
    if (!$(e.target).parents().andSelf().hasClass('scrollable')) {
      e.preventDefault();
    }
  };
  
  document.addEventListener('touchmove', handleMove, true);
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
  don't scroll if you drag here
  &lt;/div&gt;
  &lt;div class='scrollable'&gt;
  should be scrollable if you drag here
  &lt;ul&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;li&gt;and here&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  don't scroll if you drag here
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>