今天有空 细致的看看iscrolljs api 发现自己以前的几个失误是没看api造成的
失误1 页面a操作 影响了页面b的滚动条
api 解释：
options.bindToWrapper
The move event is normally bound to the document and not the
scroll container. When you move the cursor/finger out of the wrapper the
scrolling keeps going. This is usually what you want, but you can also bind the
move event to wrapper itself. Doing so as soon as the pointer leaves the
container the scroll stops.
Default: false
iscrolljs 默认 是绑定到 页面文档，而不是当前的这个操作的div，所以其他页面操作时候就有可能影响 这个页面的滚动条，例如我原来滚动条在页面底部，其他页面操作几次后这个滚动条跑到中间去了
通过设置bindToWrapper 可以让滚动条绑定到当前的div，2每个滚动区域应该有自己独立的iscrolljs实例
失误2 下拉上拉刷新后，滚动条不及时更新
api解释：
Mastering the refresh method
iScroll needs to know the exact dimensions of both the wrapper and the scroller. They are computed at start up but if your elements change in size, we need to tell iScroll that you are messing with the DOM.
This is achieved by calling the refresh method with the right
timing. Please follow me closely, understanding this will save you hours of
frustration.
Every time you touch the DOM the browser renderer repaints the page. Once this repaint has happened we can safely read the new DOM properties. The repaint phase is not instantaneous and it happens only at the end of the scope that triggered it. That‘s why we need to give the renderer a little rest before refreshing the iScroll.
To ensure that javascript gets the updated properties you should defer the refreh with something like this:
|
1
2
3
4
5
6
7
8
9
|
ajax(‘page.php‘, onCompletion);
function onCompletion () {
// Update here your DOM
setTimeout(function
() {
myScroll.refresh();
}, 0);
}; |