我正在尝试为移动设备和台式设备实现无限滚动下拉菜单。在“无限滚动”中,如果你有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设备(和其他任何设备)的预期结果:
当用户快速滚动到可滚动容器的末尾时,它不应该到达可滚动容器的末尾,而是必须继续滚动事件并相应地加载数据(就像在安卓设备中一样),以模拟无限滚动功能。