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

尝试停用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＆lt; 11 ”，其中11代表公差，实际上是$（“＃bottomLine”）。position（）。top === myScroll.wrapperHeigh + Math.abs（myScroll.y）。

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

希望这有帮助。

对iscroll-refresh的其他读者多一点 不要忘记在加载新项目后更新ur iscroll，这在iscroll文档中进行了解释。

Iscroll空的空间

3 个答案: