Question

我正在构建一个基于Web的小型媒体播放器，其基本结构如

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

我构建的播放器完全适合iphone窗口，我希望当有人在页面上移动手指时禁用滚动。但是我想在播放列表div中允许两个手指滚动。我尝试了普通路线

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

但是禁用了两个手指滚动。

想法？

Answer 1

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

        e.preventDefault();
    };

Answer 2

如果事件来自播放列表之外，您只能preventDefault：

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

javascript只允许一些滚动

2 个答案: