我正在尝试为移动设备和台式设备实现无限滚动下拉菜单。在“无限滚动”中，如果你有100个记录，当滚动容器到达末尾时，会加载20个新记录，并隐藏前20个记录（向后方向同样如此）。在移动设备的Android Chrome浏览器和桌面浏览器中，一切都运行得很完美，除了Safari Mobile浏览器（iPhone、iPad等）。
我遇到了以下问题：
- 添加lodash debounce/throttle函数到整个滚动处理程序函数，但没有帮助，甚至导致所有地方的滚动都出问题。 - 尝试使用iScroll，但遇到了与这里相同的问题，以及来自iscroll scrollTo()方法的其他错误。 - requestAnimationFrame() - 没有任何成功的结果。
这是我的示例项目： https://jsfiddle.net/q4nLverg/2/ 滚动处理程序函数代码：
我遇到了以下问题：
- 添加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设备（和其他任何设备）的预期结果：
当用户快速滚动到可滚动容器的末尾时，它不应该到达可滚动容器的末尾，而是必须继续滚动事件并相应地加载数据（就像在安卓设备中一样），以模拟无限滚动功能。