FFS! Found it... I had the height set to 100% on the global html element :
html {
height: 100%; // Arrrrggghhhh!
width: 100%;
}
已经写死了html,也就是document的值。
我于是检查这一块的东西,发现确实有问题:
// Add a new post with given contents to DOM
function add_post(contents) {
// Create new post
const post = document.createElement('div');
post.className = 'post';
post.innerHTML = contents;
// Add post to DOM
document.querySelector('#posts').append(post)
}
实现无限滚动遇到的坑 --css样式设置
遇到的最大的问题是,
在第一次到达底部成功加载后,就会无限次的重复加载,而不是像判断条件写的那样,等window.innerHeight + window.scrollY > document.body.offsetHeight时,再进行请求加载。
打印后发现数值有问题:
document.body.offsetHeight 的值只有80?
一度以为是属性用错了或者这个属性发生了变化,换用document.documentElement.scrollHeight 后,发现问题没有解决,是96px
回头发现,这个80的数值,是一开始设置的div的数值
这里:
正好看到有一篇文章中,offsetHeight的数值不变的
Javascript offsetHeight not updating from initial rendered height?
他的原因是:
已经写死了html,也就是document的值。
我于是检查这一块的东西,发现确实有问题:
这是我请求数据后插入的内容,每次插入一个 名为post类的元素
但是我页面中的是id = posts 的div,我一开始设置的也是这个的高度,正好是80px,而在我加载页面的过程中,document的高度也始终是80px;
我应该设置的是每次新加入进来的元素post的高度,而不是post外面的盒子posts的高度,这样高度就写死了,而不是随着内部内容的增加而增加了。
也就是:
问题解决。