Iscroll空格

Question

我成功地实现了iScroll。但问题是，即使没有内容，屏幕也会滚动。

有什么建议可以解决这个问题吗？

我正在尝试这样做：

// enter code here
onScrollMove: function(e){
    var cont =$('.wrapper');
    alert($(cont).height());
    var docViewBottom = that.y + $(cont).height();
    if (docViewBottom<=0) {
        that.y=-($(cont).height())+30;
        that.startY = that.y;
        that.refresh();
        e.preventDefault();
    }
},

但问题是，每次高度都会达到426px。有没有办法获得内容的真实高度？

Answer 1

我已经通过在Iscroll高度上设置屏幕高度来解决问题。

Answer 2

尝试禁用bounce

myScroll = new iScroll('wrapper', { 
    scrollbarClass: 'myScrollbar',
    bounce:false
});

Answer 3

这是一个很好的技巧，让一些东西在你的html正文的底部。我使用了一个空白来实现何时检测底部的pull-up-loadMore：

      <sapn id="bottomLine">&nbsp;</span>
      <table id="bottomRefreshImg" style="display:none">
        <tr><td><img src="refreshGreen.gif" /></td></tr>
        <tr><td>loading...</td></tr>
      </table>
    </div> //close scroller
  </div>  //close wrapper
  <div id="footer"></div>
  <script src="./jquery-2.2.3.min.js"></script>
  <script src="./iscroll.js"></script>
  <script src="./page.js"></script>
</body>

第一行是空白，在css中，它看起来像：

 #bottomLine{
    height:1px; //it's ivisible
    font-size:1px;
}

以及相应的page.js中的js代码：

var myScroll;
var myScroolHasCausedAddNew=0;

function loaded () {
    myScroll = new IScroll('#wrapper', {
                       scrollbars: true,
                       scrollbars: 'custom',
                       mouseWheel: true,
                       click:true,
                       interactiveScrollbars: true,
                       shrinkScrollbars: 'scale',
                       fadeScrollbars: true,
                       snap:true,
                       snap:'table',
    });
    myScroll.on('scrollStart',function(){
        if($("#bottomLine").position().top + myScroll.y-myScroll.wrapperHeight<11){
            if(myScroll.directionY==1){
                $("#bottomRefreshImg").show();
                myScroolHasCausedAddNew=1;
            }
        }       
        return false;
    });
    myScroll.on('scrollEnd',function(){
        if(myScroolHasCausedAddNew==1){
            myScroolHasCausedAddNew=0;
            $("#bottomRefreshImg").hide();
            loadMore();
        }
        return false;
    });

}

你的问题的答案在行"$("#bottomLine").position().top + myScroll.y-myScroll.wrapperHeight< 11 "，其中11代表容忍，实际上，$("#bottomLine").position().top === myScroll.wrapperHeigh + Math.abs(myScroll.y)。

请注意，你并不需要设置这么多的iscroll属性来让这些代码工作，我只是从我的项目中复制它们。有关iscroll属性的更多信息，请查看iscroll文档。

希望这能有所帮助。

对于iscroll -上的其他读者，刷新更多：不要忘记在加载新项目后更新您的iscroll，这在iscroll文档中有解释。