web-dev-qa-db-ja.com

ngInfiniteScroll-すべてのマウススクロールでloadMore（）メソッドが呼び出されます

コメントに関する以下の解決策。

問題：すべてのコンテナのスクロールでloadMore（）メソッドが実行されます。

意味：loadMore（）は、親コンテナの各マウススクロールで実行されます（infinite-scroll-parent="true"）

望ましい結果：私が行う小さなスクロールの代わりに、infiniteScrollDistanceが条件を満たした場合にのみloadMore（）を実行します。

私のコードは demo_basic ＆ demo_async に強く影響を受けています。

私のアプリは写真ギャラリーです。 ajax呼び出しで写真を読み込み、サムネイルディレクティブリピーターに取り込みます。コントローラーの初期化時にng-Infinite-Scrollを無効にし、コールバックの成功時に有効にします。

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

私のコーヒーコードには驚きはありません。単純なconsole.logを配置すると、問題が発生するため、ロジックは重要ではありません。

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

私のサムネイルディレクティブは同じです。驚きはありません。最後の写真がリピーターに取り込まれると、コンポーネントを有効にします。

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

何が欠けているか、間違っているのかわかりません。誰かが私を助けてくれることを願っています。

ありがとうございました。

angularjsnginfinitescroll
20
neoswf

問題を解決しました。

NIS（ngInfiniteScroll）が測定する基盤プロパティの1つは、_$container_と_$elem_です。

  1. _$container_は、スクロールされた要素Elementの親です。
  2. _$elem_は、スクロールされた要素を含む要素です。

例

_<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>
_

NISが実行しようとしているのは、マウススクロールごとに（有効な場合）これら2つの要素間の関係を計算し、_$elem_が_$container_よりも高いかどうかを確認してから、下にスクロールするかどうかです。 （距離、即時チェック、無効などのその他のプロパティもチェックします）。

したがって、この2つの基本要素間のこの関係は、NISの理解とデバッグに不可欠です。

私の問題はまさにそれでした-$ containerと$ elemは高さで等しいです
両方の要素のCSSの高さ値（100％）を修正し（主にドキュメントで高さを渡す必要があることを読んだため）、間違って_$elem_を修正しましたが、これはまったく間違っていました。

第二に-_infinite-scroll-distance_がこれを引き起こす可能性があります。設定する値が高い場合（2としましょう）、メソッドのランタイムを無効にしてもloadMore()メソッドが十分なアイテムを生成しない場合は、無限のloadmore()実行。

4
neoswf

実際のコードを確認するためのPlunkerがない場合、ngInfiniteScroll FAQに直接アクセスします。

なぜngInfiniteScrollがすべてのスクロールイベントで式をトリガーするのですか？

InfiniteScrollディレクティブは、ウィンドウの最下部にどれだけ近いかを判断するために、アタッチされている要素の高さを使用します。場合によっては、ブラウザは高さ0を報告することがあり、この動作が発生します。通常、これは、フロートされた子のみを含むコンテナ要素が原因です。この問題を修正する最も簡単な方法は、「spacer」要素をコンテナの下部に追加することです（<div style='clear: both;'></div>); 詳細については、このStackOverflowの質問と関連する回答をご覧ください .

17
Paul Lemke

まったく同じ問題、別の解決策を持っていた私の2セントを追加しましょう！私は一日中ng-infinite-scrollをデバッグしています。ある時点で、javascriptが$(window).height() == $(document).height()を報告することに気付きましたが、これはまったく意味がありません。

私は少しグーグルでやりましたが、DOCTYPEが見つからないときに起こります： jquery $（window）.height（）is return the document height

しかし、それだけでは十分ではありませんでした！ある時点で、私のDOCTYPEはブラウザに食べられました。さらに読むことができます： ワードプレスの$（window）.height（）が大きすぎます

7
Erti-Chris Eelmaa

理解するためだけに多くの時間を費やしてください。私にとって無限スクロールの方法は無限に呼ばれていましたので、コード内の無限スクロールの「div」の高さが0で、まったく増加していなかったため、ちょっとした研究が結論に達しましたユーザーがページの最後にいる間ずっと。そのため、私にとっての解決策は、無限スクロールの「div」の次の要素に「clearfix」htmlクラスを追加することでした。

1
niteshvas

これは当たり前のように思えるかもしれませんが、1日間私を避けました。

NISのホームページ の画像に示されている例に従いました。

enter image description here

注目すべき重要な部分はスクロール距離です：

infinite-scroll-distance="3"

ドキュメント によると、

ブラウザウィンドウの高さが1000ピクセルで、無限スクロール距離が2に設定されている場合、要素の下部がブラウザウィンドウの下部の2000ピクセル以内にあるときに無限スクロール式が評価されます。デフォルトは0です（たとえば、要素の下部がブラウザウィンドウの下部と交差すると式が評価されます）。

開発中、私は〜50個のアイテムしか表示していませんでしたが、間違っていたとはいえ、NISが無限に起動していると考えました。実際、4000ピクセルまで埋めようとしていました。

TL; DR：無限スクロール距離を設定している場合は削除（または少なくとも縮小）

1
adamdport

Nginfinitescrollが機能するためには、html形式がこのようになっている必要があることがわかりました。高さを固定したダミーの外部divを追加すると、問題が解決しました

<div style="height:500px;">
   <div  infinite-scroll="myPagingFunction()">
     <div  ng-repeat="x in images"></div>
   </div>
</div>

それが誰かを助けることを願っています。

0
ibsenv

私は同様の問題を抱えていましたが、コンテナの最後に到達するまでに無限スクロールがロードを停止することさえありませんでした（v1.2のinfinite-scroll-containerオプションを使用しました）。長時間のデバッグの後、コンテナの高さがフロート（634.245pxなど）であるのに気づきましたが、内部要素の高さはそれに近いですが、int（635pxなど）であり、下限が達した。 ng-infinite-scrollの問題は、その視覚的で実際のデータを処理しないことです。そのため、バックエンドから返されたデータを確認し、結果が空の場合はブロックする必要がありました（無限スクロール無効関連機能）。

0
Artjom Kurapov