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

我正在尝试为移动设备和台式机设备实现无限滚动下拉列表.在“无限滚动”下,我的意思是-如果您有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设备中的工作方式一样)以模拟无穷大滚动功能.

解决方法:

如果所有行的高度均相等,则可以尝试计算滚动区域的初始高度,并使用Intersection Observer确定哪些行可见.

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！