iscrolljs 看API 回顾以前开发中失误

今天有空 细致的看看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:

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};

原来iscrolljs要及时的知道页面dom的变化，根据最终的尺寸，确定滚动条，默认是定时监测的，所以，在有滚动条的页面增加数据和减少数据后，要及时刷新