iOS禁用页面滚动,使用溢出滚动:触摸

时间:2013-03-09 17:13:26

标签: ios css3 javascript-events scroll touch

因此,假设我们希望通过“添加到主屏幕”使Web应用程序感觉像本机应用程序。其中一个步骤是禁用默认滚动。容易,对吧?

// window or document
window.addEventListener("touchmove", function(event) {
    // no more scrolling
    event.preventDefault();
}, false);

在你添加overflow-scrolling之前,这一切都很好。确切地说,在iOS上它将是-webkit-overflow-scrolling: touch

/* #scrollable happens to be a ul */
#scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

通过添加事件预防,容器中的硬件加速滚动功能不起作用,显然不是预期的效果。

显而易见的解决方案如下所示:

// you could do this for multiple elements, of course
var scrollable = document.querySelector("#scrollable");
scrollable.addEventListener("touchmove", function(event) {
    // no more bubbling :)
    event.stopPropagation();
}, false);

此解决方案引入了一个问题,但是,如果您尝试在#scrollable中向左或向右滚动,它将恢复为默认滚动侦听器。显然,您应该监控事件以查看touchmove事件是向左还是向右追踪,对吧?不幸的是,在我不完全理解的情况下,不会在容器中垂直滚动时恢复为默认的滚动侦听器。

现在怎样?更糟糕的是,我们理想情况下能够处理clickli上的点击式事件(阅读:touchstart):

var items = scrollable.querySelectorAll("#scrollable li");
for (var item = 0; item < items.length; item++) {
    items[item].addEventListener("touchstart", function() {
        // handle the touch start
    }, false);
}

要解决此问题,我们可以转而使用click事件,但由于点击和响应之间的延迟,默认设置使webapp“感觉”原生的目标。要解决此问题,我们将为touchstarttouchend添加一个事件监听器:

var items = scrollable.querySelectorAll("#scrollable li");
var activeItem = null, startTouch = null;
for (var item = 0; item < items.length; item++) {
    items[item].addEventListener("touchstart", function(event) {
        startTouch = event.touches[0];
        activeItem = this;
    }, false);
    items[item].addEventListener("touchend", function(event) {
        var touch = event.changedTouches[0];
        var deltaX = touch.pageX - startTouch.pageX
        var deltaY = touch.pageY - startTouch.pageY;
        // require the touchstart to be within 10 pixels of the touchend
        if (deltaX * deltaX + deltaY * deltaY <= 100)
            // handle "click" event
    }, false);
}

这一切都很好,但我们仍然没有解决问题,默认页面滚动控制了一些touchmove事件。有什么想法吗?

1 个答案:

答案 0 :(得分:8)

尝试更换windowscrollable元素侦听器中的逻辑,如下所示:

// window or document
window.addEventListener("touchmove", function(event) {
  if (!event.target.classList.contains('scrollable')) {
    // no more scrolling
    event.preventDefault();
  }
}, false);

// No special listeners needed on .scrollable elements

这样,您只能在尝试滚动不可滚动元素时阻止默认设置。

您仍然会遇到一个问题,即在可滚动内容的顶部/底部开始拖动会导致整个应用“反弹”。要解决此问题,请参阅Joe Lambert's ScrollFix