Question

I’m building a small web based media player that has a basic structure like

<div id="content">
    <!-- Some stuff -->
    <div id="playlist" style="overflow-y: scroll">
        <ul>
            <li> </li>
            <!-- ... -->
        </ul>
    </div>
    <!-- more stuff -->
</div>

I built the player to fit exactly in the iphone window and I wish to disable the scrolling when someone moves their finger around the page. But I want to allow two finger scrolling inside the playlist div. I tried the normal route

document.ontouchmove = function(e){
    e.preventDefault();
}

but that disables two finger scrolling along with it.

ideas?

Answer 1

You could only preventDefault if the event originates from outside the playlist:

document.ontouchmove = function (e) {
    if (e.target.id !== 'playlist') {
        e.preventDefault();
    }
};