相关疑难解决方法(0)

因此,假设我们希望通过"添加到主屏幕"使webapp感觉像本机应用程序.其中一个步骤是禁用默认滚动.容易,对吗？

// 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事件是向左还是向右追踪,对吧？不幸的是,在我不完全理解的情况下,不会在容器中垂直滚动时恢复默认滚动侦听器.

怎么办？更糟糕的是,我们理想情况下能够处理click或点击个人事件li(阅读:) touchstart:

var items = scrollable.querySelectorAll("#scrollable li"); …

使用slick.js实现滚动的最佳方法是什么,这样当您使用鼠标滚动时,它会切换到下一张幻灯片？还是有一个我错过的设置？

以下是我所指的,以防万一. http://kenwheeler.github.io/slick/