0

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 になるたびに発生します。コンテンツの実際の高さを取得する方法はありますか?

4

3 に答える 3

0

Iscroll Height に画面の高さを設定することで解決しました

于 2013-05-06T06:34:52.947 に答える
0

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-refresh に関する他の読者向けの追加情報: 新しいアイテムがロードされたら、iscroll を更新することを忘れないでください。これについては、iscroll ドキュメントで説明されています。

于 2016-04-30T06:47:39.403 に答える
0

無効にしてみてくださいbounce：

myScroll = new iScroll('wrapper', { 
    scrollbarClass: 'myScrollbar',
    bounce:false
});
于 2013-05-03T18:31:53.337 に答える