javascript only allow some scrolling

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开发者_JAVA技巧 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?

    document.ontouchmove = function(e) {
        var target = e.currentTarget;
        while(target) {
            if((target.id === 'playlist'))
                return;
            target = target.parentNode;
        }

        e.preventDefault();
    };

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

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