iScroll 4 fixed menu, unable to scroll rest of page

Question

I'm using iScroll for a horizontal, fixed position menu. It works great, however I'm unable to vertically scroll the rest of the page in a mobile browser. It works fine in a pc/mac resized browser window, just not on mobile. I've tried Safari on iPhone and Chrome and Dolphin on Android.

Any ideas how I can get the page to scroll too?

I've played with the vScroll, hScroll, etc options but haven't been able to solve the issue:

<nav id="mainNav">
    <ul class="pagesIcons bottom">
        <li style="background-color:#000000" class="active selected current youarehere">
            <a href="#" class="inner">
                <div class="buttonIcon">
                    <img src="/content/icons/002.png">
                </div>
                <div class="buttonText">
                    Homepage
                </div>
            </a>
        </li>
        <li style="background-color:#383838" class="">
            <a href="#" class="inner">
                <div class="buttonIcon">
                    <img src="/content/icons/002.png">
                </div>
                <div class="buttonText">
                    Gallery
                </div>
            </a>
        </li>
        <li style="background-color:#5c5c5c" class="">
            <a href="#" class="inner">
                <div class="buttonIcon">
                    <img src="/content/icons/004.png">
                </div>
                <div class="buttonText">
                    Events
                </div>
            </a>
        </li>
        ........
    </ul>
</nav>

I'm initialising it with:

var myScroll;
function loaded() {
    myScroll = new iScroll('mainNav', {
        bounce: false
    });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

Answer 1

Solved. I just had to remove:

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

Pretty obvious. This was preventing the default event on 'touchmove'. Durrrrrrr

Answer 2

You can fix this issue by applying this jquery, In place of ClassName you have to add the name of wrapper class in which you want scrolling, If you still face problem let me know I will try to help more.

$('.ClassName').bind('touchmove', function(e){
  e.stopPropagation();
});