용기 내 angularjs 무한 스크롤

용기 내 angularjs 무한 스크롤

angularjs 무한 스크롤을 사용하려고 합니다. 스크롤이 브라우저 창에 상대적인 경우에만 작동하는 것 같습니다.

내부 DIV에서 무한 스크롤을 수행하려고 합니다.저는 일반 포장지와 실제 내용을 표시하기 위한 내부 div가 있는 페이지를 가지고 있습니다.

래퍼 페이지는 창 전체를 경과하도록 설정되어 있으므로 스크롤할 수 없습니다.그러나 내용을 포함하는 내부 div에는 자체 스크롤 막대가 있습니다.

내부 콘텐츠 div 스크롤바를 기준으로 무한 스크롤을 작동하려면 어떻게 해야 합니까?

다른 사용자가 동일한 내용을 검색하여 여기에 오는 경우 - 다음은 유용한 링크입니다.

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'는 부모 요소를 창 대신 계산에 사용합니다.

다음은 플레인 HTML의 예를 제시하겠습니다.

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

여기 두 가지 고차:

1. 무한 스크롤 거리가 제대로 작동하려면 무한 스크롤 지시어의 하위 요소가 열거 중인 요소가 되어야 합니다. 그러면 스크롤 거리 트리거가 올바르게 실행됩니다.
2. 이 예에서 무한 스크롤컨테이너 값은 큰따옴표로 둘러싸인 클래스 이름입니다..content작은 따옴표로 묶습니다.소스를 읽으면 문자열 값은 최종적으로는 에 입력됩니다.document.querySelector. 그 문서를 읽고 어떤 가치를 기대하는지를 확인할 수 있습니다.

를 사용할 수도 있습니다.infinite-scroll-parent@trushkevich와 같은 도우미는 무한 확장 디렉티브의 직접 부모 요소가 스크롤 가능한 컨테이너인지 여부를 제안합니다.

이 스레드는 좀 오래되어 아직 관련이 있습니다.

ng-infinite-scroll은 일부 포크솔루션에서 Marge되어 다음 (문서화되어 있지 않은) 속성을 지원합니다.

infiniteScrollContainer를 사용하면 쿼리 셀렉터, 함수 또는 html 요소를 전달하여 컨테이너를 설정할 수 있습니다.

infinite Scroll Parent는 ($window 대신) 상위 항목을 컨테이너로 사용하도록 지시합니다.

사용 예:

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

또 다른 무한 스크롤을 제안하고 있습니다.ui-scroll은 가장 기본적인 기능인 "요소가 보이지 않게 되면 파괴하고 다시 보이게 되면 재생성"을 갖추고 있습니다.- 워처를 생성하지 않고 앱을 느리게 만듭니다.

ng-infinite-scroll.js 파일을 열고 $window의 모든 참조를 $("#my-content-container")로 변경합니다.

비고: 견고한 솔루션은 컨테이너 ID를 사용하여 무한 스크롤에 특성 매개 변수를 추가하는 것입니다.

이 코드를 사용합니다. 플러그인은 없습니다.

컨트롤러에서 다음을 수행합니다.

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

를 합니다.limit를 표시하는 " " " " 。$scope.limit=5

언급URL : https://stackoverflow.com/questions/21674266/angularjs-infinite-scroll-in-a-container