iscroll 如何滚动？我不知道它是如何向上滑动或向下滑动的答案

【问题标题】：how iscroll scrolls ? I can't figure out how it swipes up or swipes downiscroll 如何滚动？我不知道它是如何向上滑动或向下滑动的
【发布时间】：2013-03-04 18:12:01
【问题描述】：

当我尝试在我的 android 手机中向下滑动时，我的 iscroll 对象不会向下滑动到底部，但与底部有一段距离。 HTML 模板如下：

 /*The HTML template code like this:*/
 <div class="content">
    <div class="scroller">
       <div class="div1">
       </div>
    </div>
 </div>

 /*The javascript code like this:*/
 $.get(url, function(html){
                _this.$('.div1').html(html);
                _this.$('.div1').css('display','inline-block');
                var width=_this.$('.div1').width()||'400px';
                var height=_this.$('.div1').height()||'900px';
                //height+=210;
                if(width<=400)width=400;
                _this.$('.div1').css('width',width);
                _this.$('.div1').css('height',height);
                _this.$('.scroller').css('width',width);
                _this.$('.scroller').css('height',height);
                if(html.indexOf('errorpage')<=0)
                    _this.$('.div1').addClass('padding-all-4px');
                setTimeout(function () {
                    _this.scroll = new iScroll(_this.$('.content')[0],{
                        hScroll: true,
                        vScroll: true,
                        lockDirection: false,
                        zoom: true,
                        zoomMin: 0.5,
                        zoomMax: 4,
                        doubleTapZoom: 2
                    });
                }, 0);
            });

【问题讨论】：

我们不是读心术的变种人，亲爱的。请放置一些代码来检查并使您的问题足够清楚... :)
你能解释一下 iscroll 是如何滚动的吗？谢谢你。

标签： javascript swipe iscroll

【解决方案1】：

有两种使用 iScroll 的方法。您可以使用 iScroll 的 jScroll 包装器，也可以使用纯 iScroll。为了让 iScroll 正常工作到您要附加 iScroll 的容器，它应该满足一些条件

容器应该有相对位置或绝对位置
容器应该有 height（如果你想要 vScroll）和 width（如果你想要 hScroll）
应隐藏容器溢出（由插件本身处理）
您不需要为子容器设置任何高度。子容器高度应取决于其内容

试试这样的。

HTML模板代码如下：

<div class="content">
    <div id="scroller_content">
       <div class="dynamic-content">
         <!-- you contents should be here -->
       </div>
    </div>
 </div>

javascript代码如下：

var scrollContent = new iScroll('scroller_content', {
    /* other options goes here */
  }
});

如果您将内容动态加载到子容器，那么您可以在加载内容后简单地刷新 iScroll 对象

scrollContent.refresh();

如果您想在 iScroll 中使用 iScroll，请尝试这样的操作。

会说你启用了两个 iScroll。 child_container 元素位于您的 parent_container 中。那么，

var parentScroller, childScroller, childScrollerTimeout;

parentScroller = new iScroll('parent_container',{
  /* other options goes here */
});

childScroller = new iScroll('child_container',{
  /* other options goes here */
  onBeforeScrollStart : function(e){
    clearTimeout(childScrollerTimeout);
    parentScroller.disable();
  },
  onScrollEnd:function(){
    childScrollerTimeout = setTimeout(function(){
     parentScroller.enable()},500);
    /* it is required to use timeout. If not second time onBeforeScroll will not work as expected */
  }
});

如果您有任何不明白的地方，请告诉我。我将进一步演示。如果我在这里犯了任何错误，请向我道歉。希望这至少会有所帮助.. :)

【讨论】：