AngularJS disable scrolling except for specific elements and children - jqlite or directive <p>I want to disable scrolling by default except for specific elements and their children in an AngularJS/Cordova hybrid application.</p> <p>I don't want to introduce jQuery into the app so I am trying to use Angular's jqlite (the stripped down essentials of jQuery). I'm also open to using a directive to solve the problem if you have any suggestions.</p> <p>As you can see below I'm using jqlite's parent() method to see if the element's parent has the scrollable class. However this is not effective because it would be better to check the element itself and any parents up the DOM tree. jQuery has a parents() method to do this but jqlite does not. </p> <p>Any ideas how to use jqlite to check all parents of an element or how to get the desired solution from a directive?</p> <pre><code>// disable scrolling by default unless inside a `scrollable` element document.addEventListener('touchmove', function (e) { var scrollable = false; // todo: need to go all the way up the DOM tree instead of just one level up var items = angular.element(e.target).parent(); angular.forEach(items, function (o) { var item = angular.element(o); if (item.hasClass("scrollable")) { scrollable = true; } }); if (!scrollable) { e.preventDefault(); } }, true); </code></pre>