Javascript 无限卷轴不'；如果一直滚动到div的末尾，则无法工作

我试图在聊天中做一个无限的滚动。我正在使用scroll事件来检查是否

scrolltop

，如果是，则调用函数

loadMore

。只要你从不滚动到最顶端，这就可以很好地工作。我制作了一个gif来显示这一点（希望它有意义）：

如果在加载旧邮件时仍有更多空间滚动，则保留位置，滚动条会被按下

但是，如果在加载旧邮件时一直滚动到顶部，滚动条将固定在顶部，您将失去位置（同时滚动事件将停止触发，因此除非向下滚动一点，否则您将停止加载邮件）

---

还有其他人经历过吗？你做了什么来修复它？谢谢你的建议。谢谢

更新了答案以支持两个方向（向上或向下）和加载填充。请在展开模式下运行代码段，内联预览框对于可滚动列表来说太小

var isLoadingAlready=false；
var upDirection=true；//加载列表顶部的记录；false将它们加载到列表的末尾
var loadThreshold=100；//到要开始加载的边的距离（以像素为单位）
var HowmanyDataloadSavaailable=5；
如果（向上）{
$（'.scroll'）[0].scrollTop=100000；//一直向下滚动
$（'.scroll'）.css（'paddingTop'，loadThreshold）；
}否则{
$（'.scroll'）.css（'paddingBottom'，loadThreshold）；
}
$（'.scroll'）。在（'scroll'，函数（）{
var s=this；//拾取DOM元素
如果{//只是为了确保/安全
var scrollableHeight=s.scrollHeight-s.clientHeight；
如果（可滚动高度>0）{
var scrollTop=s.scrollTop；
var distToTheEdge=upDirection？scrollTop:scrollableHeight-scrollTop；
如果（距离边缘0）{
对于（变量i=0；i<10；i++）{
items.push（$（“
”）.text（'msg:'+（i+1）+'，左部分：'+howmanyataloadsavaailable））；
}
}
var$se=$（'.scroll'）；//可滚动的DOM元素
变量$ul=$（'.scroll ul'）；
var-se=$se[0]；
如果（向上）{
var hBefore=$ul.height（）；
$ul.预包装（项目）；
var hDiff=$ul.height（）-hBefore；
se.scrollTop=Math.max（hDiff，loadThreshold）；
}否则{
$ul.附加（项目）；
se.scrollTop=se.scrollHeight-se.clientHeight-Math.max（se.scrollHeight-se.clientHeight-se.scrollTop，loadThreshold）；
}
$se.removeClass（“加载”）；
if（typeof（doneCallback）==“函数”）{
doneCallback（）；
}
}, 500);
}

。滚动{
溢出y：自动；
最大高度：200px；
边框：2个虚线#aaa；
填充：0.5em；
边缘：1米；
}
.滚动.加载{
背景色：#F5；
}
保险商实验室{
列表样式：无；
填充：0；
}
李{
填充：0.5em；
边框：1px实心#eee；
边界半径：0.5em；
边缘：0.2米；
动画：色彩变化1200ms；
背景：白色；
盒影：1px 1px 5px 0px rgba（0,0,0,0.05）；
}
@关键帧颜色更改
{
0%{背景：#定义；}
100%{背景：白色；}
}

你能提供在scroll事件上执行的代码吗？如果（scrollTop@Y.GherbiDude你摇滚乐了，那就真的是

！修正它的行是
se.scrollTop=Math.max（hDiff，loadThreshold）我不确定我是否理解为什么。。你能解释一下吗？@EgorEgorov需要确保你没有违反触发加载的边界。因此，它会滚动到最后添加的项目（使用所有添加项目的高度），但如果它在某种程度上比该边界更近（项目太少或填充不够）-您将被放置在该边界后面的“安全”位置。我希望这是有意义的）