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();
    }
},

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

Answer 1

尝试禁用bounce：

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

Answer 2

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

Answer 3

在你的 html 正文的底部保留一些东西是一个很好的技巧。当检测上拉负载的底部时，我使用了一个空白来实现这一点更多：

      <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-refresh 的其他读者的更多信息： 不要忘记在加载新项目后更新您的 iscroll，这在 iscroll 文档中进行了说明。