web-dev-qa-db-ja.com

コンテナ内のangularjs無限スクロール

angularjs infinite scroll 使用しようとしているのは、スクロールがブラウザウィンドウに対して相対的な場合にのみ機能するようです。

内部DIVで無限スクロールを行いたい、つまり、実際のコンテンツを表示するための汎用ラッパーと内部divを備えたページがあります。

ラッパーページはウィンドウ全体を経過するように設定されているため、スクロールできません。ただし、コンテンツを含む内部divには独自のスクロールバーがあります。

内側のコンテンツdivスクロールバーに対して無限スクロールを機能させるにはどうすればよいですか？

javascriptangularjsinfinite-scrollnginfinitescroll
35
Elia Weiss

誰かが同じものを検索してここに来る場合-役に立つリンクがあります：

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 （プルリクエストとディスカッション）

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement （必要な機能を備えたフォーク）

https://raw.github.com/hlsolutions/ngInfiniteScroll/scroll-on-any-lement/src/infinite-scroll.coffee （ソース自体）

この方法で使用できます（例はhamlにあります）：

.div-with-overflow
  %ul{data: {'infinite-scroll' => "getItems()", 'infinite-scroll-disabled' => 'cannotGetItems()', 'infinite-scroll-parent' => 'true'}}

'infinite-scroll-parent' => 'true'は、ウィンドウではなく親要素を計算に使用します。

28
trushkevich

プレーンHTMLの例を次に示します。

<div class="content">
    <div infinite-scroll="addPage()" infinite-scroll-container='".content"'>
        <div ng-repeat="recipe in recipes">

ここで2つの落とし穴：

  1. Infinite-scroll-distanceが正しく機能するには、infinite-scrollディレクティブの子要素が列挙する要素である必要があるため、スクロール距離トリガーが正しく起動します。
  2. この例のinfinite-scroll-containerの値は、二重引用符で囲まれたクラス名.contentであり、単一引用符でラップされています。ソースを読むと、文字列値は最終的にdocument.querySelectorに送られます。それに関するドキュメントを読んで、期待される値を確認してください。

無限スクロールディレクティブの直接の親要素がスクロール可能なコンテナである場合、@ trushkevichのようなinfinite-scroll-parenthelperを使用することもできます。

17
jtlai

このスレッドは少し古く、それでもなお関連性があります。

思われるように、ng-infinite-scrollはフォークされたソリューションの一部に統合され、次の（文書化されていない）属性をサポートするようになりました。

infiniteScrollContainerを使用すると、クエリセレクターまたは関数またはhtml要素を渡すことでコンテナーを設定できます

infiniteScrollParentは、単に（$ windowの代わりに）コンテナとして親を使用するように指示します

サンプルの使用：

<div class="scroller-companies" infinite-scroll="showMorePlaces()" infinite-scroll-parent="true">
10
TheZuck

私は別の無限スクロールを提案しています： i-scroll それは最も基本的な機能を持っています。 -ウォッチャーの作成を避け、アプリの動作を遅くします

6
Endless

Ng-infinite-scroll.jsファイルを開き、$ windowのすべての参照を$（ "＃my-content-container"）に変更します。

注：堅牢なソリューションは、コンテナのIDでattrパラメーターを無限スクロールに追加することです。

3
Elia Weiss

プラグインがないこのコードを使用してください

コントローラで次のことを行います

$(".Scrollx").scroll(function () {
        if ($('.Scrollx').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $scope.limit = $scope.limit + 5;      
        }
});

初めて例を表示したい場合は、limit変数を設定します：$scope.limit=5

1
Raja