Question

我正在尝试为移动设备和台式机设备实现无限滚动下拉菜单。在“无限滚动”下，我的意思是-如果您有100条记录，则到达可滚动容器的末尾时，将加载20条新记录，并且前20条记录将隐藏（向后方向相同）

我遇到了以下问题：

除Safari移动浏览器（iPhone，iPad等）外，所有内容都可以在移动Android Chrome浏览器+桌面浏览器中完美运行

我尝试了以下解决方案：

在整个滚动处理程序功能中添加了lodash的反跳/油门功能，该功能无济于事，甚至无处不在滚动
我尝试使用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确定哪些行可见。

如何在iOS设备中消除抖动或限制滚动事件（Safari）

1 个答案: