javascript - 如何在 iOS 设备 (Safari) 中消除或限制滚动事件

Question

我正在尝试为移动设备和桌面设备实现无限滚动下拉菜单。在“无限滚动”下，我的意思是:如果你有 100 条记录，当到达可滚动容器的末端时，将加载 20 条新记录，前 20 条记录将隐藏(向后方向相同)

我遇到了以下问题:

除 Safari 移动浏览器(iPhone、iPad 等)外，一切都在移动 Android Chrome 浏览器 + 桌面浏览器中完美运行

我尝试了以下解决方案:

• 在整个滚动处理函数中添加了 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。以确定哪些行可见。