我有一个无限滚动框。有一个项目列表,当列表向上滚动时,项目会从底部追加,向下滚动时反之亦然。当用户正常向下或向上滚动时,它会按预期工作。当他们用笔记本电脑触控板或在屏幕上用足够的力量滚动时,然后滚动条到达顶部,用户需要再次向下滚动才能正常工作。2有什么方法可以解决这个问题吗?
这里有一个codepen link我试图做什么。似乎它不会在codepen中加载向下滚动(这不是问题所在,所以请忽略),请向下滚动一点让它工作。我可以在使用笔记本电脑触控板或触摸屏时产生所描述的行为,我向下滑动,所以列表向上移动。希望这不是令人困惑的-基本上我希望滚动条永远不会到达顶部,无论用户如何努力滚动/滑动。
let container = document.querySelector('.calendar-container')
let calendar = document.querySelector('.calendar')
container.addEventListener('scroll', function (event) {
const factor = container.scrollTop / (container.scrollHeight - container.offsetHeight);
if(factor < 0.4) {
let move = calendar.querySelector(':last-child')
move.remove();
calendar.prepend(move);
} else if(factor > 0.6) {
let move = calendar.querySelector(':first-child')
move.remove();
calendar.append(move);
}
});
calendar.scroll(0,100);
字符串
根据评论,目前这只是Chrome中的一个问题
1条答案
按热度按时间ycl3bljg1#
好吧,我发现了一个黑客解决方案,但将开放,看看其他人,如果有人有更好的解决方案,只是将此添加到滚动事件的末尾
字符串
});