CODEWITHSUNDEEP
javascriptiosscrollsafari
Syler92
Syler92

Reputation: 41

How to debounce or throttle scroll events in iOS devices ( Safari )

I`m trying to implement infinity scroll dropdown for mobile and desktop devices. Under "infinity scroll", I mean the following - if you have 100 records, when reach the end of the scrollable container, 20 new records will be loaded and the first 20 records will hide ( same for the backward direction )

I have encountered the following problems:

Everything works perfectly in mobile Android Chrome browsers + desktop browsers except the Safari Mobile browser ( iPhone, iPad, etc.)

I have tried the following solutions:

Here is my example project: https://jsfiddle.net/q4nLverg/2/

The scroll Handler function code :

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 - just changes the scrollTop of the container to simulate auto scroll up or down when the new data is loaded and the old one is removed from the select

The expected results in iOS devices ( and any other ):

When the user scrolls fast to the end of the scrollable container it shouldn`t go to the end of the scrollable container, but it must continue the scroll event and load the data consequently ( just like how it works in android device ) to simulate infinity scroll functionality.

Upvotes: 3

Views: 1992

Answers (1)

Daniel Valchev
Daniel Valchev

Reputation: 46

If all of the rows has equal heights, you can try calculate the initial height of the scrolling area and use Intersection Observer to determine which rows are visible.

Upvotes: 3

Related Questions