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

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

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

На странице обертки установлено полное окно, поэтому оно никогда не прокручивается. но внутренний div, содержащий контент, имеет собственную полосу прокрутки.

Как заставить бесконечный свиток работать по отношению к внутренней полосе прокрутки контента?

Ответ 1

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

https://github.com/BinaryMuse/ngInfiniteScroll/pull/7 (запрос на загрузку и обсуждение)

https://github.com/hlsolutions/ngInfiniteScroll/tree/scroll-on-any-lement (fork с необходимой функциональностью)

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' приведет к тому, что родительский элемент будет использоваться для вычислений вместо окна.

Ответ 2

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

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

Вот два вопроса:

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

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

Ответ 3

Этот поток немного старый, но тем не менее релевантный.

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

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

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

Использование примера:

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

используйте этот код, нет плагина

в контроллере выполните следующие действия

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

Задайте переменную limit так, как вы хотите отображать первое время Пример: $scope.limit=5