Как отменить или прокрутить события прокрутки на устройствах iOS (Safari)

Question

Я пытаюсь реализовать выпадающий список бесконечности для мобильных и настольных устройств. Под «прокруткой бесконечности» я подразумеваю следующее - если у вас есть 100 записей, когда вы достигнете конца прокручиваемого контейнера, будет загружено 20 новых записей, а первые 20 записей будут скрыты (то же самое для обратного направления)

Я столкнулся со следующими проблемами:

Все отлично работает в мобильных браузерах Android Chrome + настольных браузерах, кроме браузера Safari Mobile (iPhone, iPad и т. Д.)

Я пробовал следующие решения:

• Добавлена ​​функция lodash debounce / throttle для всей функции обработчика прокрутки, которая не помогла, даже повредила прокрутку везде

• Я пытался использовать iScroll, но столкнулся с той же проблемой, что и здесь + дополнительные ошибки в методе iscroll scrollTo ().

• requestAnimationFrame () - безуспешно.

Вот мой пример проекта: https://jsfiddle.net/q4nLverg/2/

Код функции обработчика прокрутки:

function scrollHandler(e) {

    var top = $(this.$refs.dropdownContainer).scrollTop();
    var difference = $(this.$refs.dropdownMenu).height() - $(this.$refs.dropdownContainer).height()

    if (top >= difference - this.scrollLimit && difference > 0) {

        this.maxRowsLimitIndex = this.maxRowsLimitIndex + this.numberOfItemsToLoad;
        this.minRowsLimitIndex = this.minRowsLimitIndex + this.numberOfItemsToLoad

        if ( this.maxRowsLimitIndex >= this.options.length ) {

            this.maxRowsLimitIndex = this.options.length
            this.minRowsLimitIndex = this.options.length - this.numberOfVisibleItems
        }
        else {
            this.scrollTo( (difference - (this.numberOfItemsToLoad * 28)) )
        }
    }
    else if ( top <= this.scrollLimit )
    {
        this.maxRowsLimitIndex = this.maxRowsLimitIndex - this.numberOfItemsToLoad;
        this.minRowsLimitIndex = this.minRowsLimitIndex - this.numberOfItemsToLoad

        if ( this.maxRowsLimitIndex <= this.numberOfVisibleItems  ) {
            this.maxRowsLimitIndex = this.numberOfVisibleItems
            this.minRowsLimitIndex = 0
        }
        else {
            this.scrollTo( (this.numberOfItemsToLoad * 28)/2)
        }

    }
}

this.scrollTo - просто изменяет scrollTop контейнера, чтобы имитировать автоматическую прокрутку вверх или вниз при загрузке новых данных и удалении старого из выбора

Ожидаемые результаты на устройствах iOS (и любых других):

Когда пользователь быстро прокручивает до конца прокручиваемого контейнера, он не должен переходить в конец прокручиваемого контейнера, но он должен продолжать событие прокрутки и последовательно загружать данные (так же, как это работает в устройстве Android) для имитации функциональности прокрутки бесконечности.

Answer 1

Если все строки имеют одинаковую высоту, вы можете попытаться вычислить начальную высоту области прокрутки и использовать Intersection Observer , чтобы определить, какие строки видны.