document.onscroll = function()
{
if (document.documentElement.scrollTop + window.innerHeight > document.documentElement.scrollHeight * 0.75)
{
var height = document.documentElement.height;
document.documentElement.height = height + 500;
alert('75%');
}
};
html {
height: 1000px;
}
我希望此代码在每次滚动条达到其高度的75%时运行以添加500px,然后在滚动条再次达到其75%时重复该功能。
该代码可在我的环境中运行,但是如果我快速滚动,则会收到多个警报,并且500px会被添加多次。
我尝试了以下操作:
document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight * 0.75
但它从未发出警报。
答案 0 :(得分:1)
documentElement 对象上没有这样的 height 属性。要更新 高度,您必须访问 style 属性 documentElement 。
尝试一下。
document.onscroll = function()
{
if (document.documentElement.scrollTop + window.innerHeight > document.documentElement.scrollHeight * 0.75)
{
var height = document.documentElement.style.height;
document.documentElement.style.height = (+height.slice(0,-2) + 500) + "px";
alert('75%');
}
};
<!DOCTYPE html>
<html style="height: 1600px">
</html>
希望这会有所帮助:)。
编辑:。附加的屏幕截图。
答案 1 :(得分:1)
使用控制台可获得更好的结果
var sw_75 = false;
window.onscroll = function () {
if (sw_75) return;
if (document.documentElement.scrollTop + window.innerHeight > document.documentElement.scrollHeight * 0.75) {
console.log('75%');
sw_75 = true;
var body = document.getElementsByTagName('body')[0];
var height = parseInt(body.style.height.replace("px", ""));
body.style.height = (height + 500) + "px";
sw_75 = false;
}
};
html, body {
margin: 0px;
padding: 0px;
}
<body style="height:1000px;"></body>