angularjs бесконечная прокрутка в контейнере

Question

Я пытаюсь использовать бесконечную прокрутку angularjs. Кажется, это работает, только если прокрутка относительно окна браузера.

Я хотел бы сделать бесконечную прокрутку во внутреннем DIV, то есть у меня есть страница с общей оберткой и внутренним div для отображения реального содержимого.

Страница-обертка настроена так, чтобы проходить через все окно, поэтому ее нельзя прокручивать. но внутренний div, содержащий контент, имеет собственную полосу прокрутки.

Как заставить бесконечную прокрутку работать относительно внутренней полосы прокрутки содержимого div?

Answer 1

Если кто-то ищет то же самое и заходит сюда - вот полезные ссылки:

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 (сам источник)

Вы можете использовать это следующим образом (пример на хамле):

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

Предоставление 'infinite-scroll-parent' => 'true' сделает родительский элемент, который будет использоваться для расчетов вместо окна.

Answer 2

Вот пример в простом HTML:

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

Две ошибки здесь:

1. Чтобы бесконечное расстояние прокрутки работало правильно, дочерний элемент вашей директивы бесконечного прокрутки должен быть элементами, которые вы перечисляете, поэтому триггер расстояния прокрутки будет срабатывать правильно.
2. Значение infinite-scroll-container в этом примере - имя класса в двойных кавычках .content затем завернутые в одинарные кавычки. Если вы читаете источник, строковое значение в конечном итоге поступает в document.querySelector, Вы можете прочитать документацию по этому вопросу, чтобы увидеть, какую ценность он ожидает.

Вы также можете использовать infinite-scroll-parentпомощник, такой как @trushkevich, предложил, если непосредственным родительским элементом вашей директивы infinite-scroll является прокручиваемый контейнер.

Answer 3

Эта тема немного старая, но тем не менее актуальна.

Как кажется, ng-infinite-scroll объединен в некоторых разветвленных решениях и теперь поддерживает следующие (недокументированные) атрибуты:

infiniteScrollContainer позволяет вам устанавливать контейнер, передавая селектор запроса или функцию или элемент html

infiniteScrollParent просто говорит ему использовать родителя в качестве контейнера (вместо $window)

Образец использования:

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

Answer 4

Я предлагаю другой бесконечный свиток: в ui-scroll есть самая фундаментальная особенность: "уничтожение элементов по мере того, как они становятся невидимыми, и воссоздание их, если они снова становятся видимыми". - избегает создания наблюдателя и делает ваше приложение вялым

Answer 5

Откройте файл ng-infinite-scroll.js и измените все ссылки $window на $("#my-content-container").

Примечание: надежным решением было бы добавить параметр attr к бесконечной прокрутке с идентификатором контейнера.

Answer 6

Использовать этот код нет плагина

в контроллере сделать следующее

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

Установить limit переменная, как вы хотите отобразить в первый раз пример: $scope.limit=5