我能够用 iScroll 得到一个很好的解决这个问题的方法,有动量滚动的感觉和一切https://github.com/cubiq/iscroll github 文档很棒,我大部分时间都跟着它。这是我的实现细节。
HTML:
我将内容的可滚动区域包装在 iScroll 可以使用的一些 div 中:
<div id="wrapper">
<div id="scroller">
... my scrollable content
</div>
</div>
CSS:
我使用 Modernizr 类进行“触摸”,将我的样式更改仅针对触摸设备(因为我只在触摸时实例化 iScroll)。
.touch #wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.touch #scroller {
position: absolute;
z-index: 1;
width: 100%;
}
JS:
我从 iScroll 下载中包含 iscroll-probe.js,然后按如下方式初始化滚动条,其中 updatePosition 是我对新滚动位置做出react的函数。
# coffeescript
if Modernizr.touch
myScroller = new IScroll('#wrapper', probeType: 3)
myScroller.on 'scroll', updatePosition
myScroller.on 'scrollEnd', updatePosition
您现在必须使用 myScroller 来获取当前位置,而不是查看滚动偏移量。这是来自http://markdalgleish.com/presentations/embracingtouch/ 的一个函数(一篇超级有用的文章,但现在有点过时了)
function getScroll(elem, iscroll) {
var x, y;
if (Modernizr.touch && iscroll) {
x = iscroll.x * -1;
y = iscroll.y * -1;
} else {
x = elem.scrollTop;
y = elem.scrollLeft;
}
return {x: x, y: y};
}
唯一的其他问题是偶尔我会丢失我试图滚动到的页面的一部分,并且它会拒绝滚动。每当我更改#wrapper 的内容时,我都必须添加一些对 myScroller.refresh() 的调用,这解决了问题。
编辑:另一个问题是 iScroll 吃掉了所有的“点击”事件。我打开了让 iScroll 发出“点击”事件并处理这些事件而不是“点击”事件的选项。谢天谢地,我不需要太多点击滚动区域,所以这没什么大不了的。