Swipe event propagation with nested div doesn't work

Hi I've the following html structure:

<div class="container">

        <div class="scroller">
            <div id ="goldenPage" class="page active">              
                <div class="block text">
                    <div class="rich-text"></div>
                <div class="block">
                    <div class="form"></div>
                <div class="block">
                    <ul class="menu"></ul>
            <div id ="cachePage" class="page"></div>


If I bind a swipe event on div with class container using code

var myElement = $(".container")[0];
            var hammertime = new Hammer(myElement);             
                console.debug(" manage swiperight event.");                 

and if I swipe nothing happen (except if I swipe on the bottom of my page because the internal div with scroller class is fewer height than parent div). If I bind the swipe on div with class scroller the swipe is correctly binded. The scroller div is binded with jquery scrollpane plugin. Any ideas?!


DEMO — Make sure your JavaScript/jQuery is fired after the document.ready event.

If the JavaScript fires before the element is available in the DOM, your JavaScript will not find the element, and thus be unable to bind the (swiperight) event to the element.

Using jQuery, this can be achieved by wrapping your JavaScript code in:

$(function() {
    // Your code here.


 ? How can I suppress "WARN: 'Could not find HammerJS." on each text execution?
 ? hammer.js exhibits pinch lag when changing pinch direction (tested on Android)
 ? angular2 and typescript error
 ? Angular2: hammerjs is not found
 ? Turn off Hammer JS events in Angular 2 to allow scrolling
 ? Angular Dragula and ng-repeat $index
 ? Dragula Drag only wanted elements
 ? angular2 Dragula css cursor grab/grabbing not working
 ? ng2-dragula group items in div
 ? Adding Dragular to Angular2 Application: document is not defined