滚动条达到75%时发出警报

时间:2019-07-14 03:24:18

标签: javascript

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

但它从未发出警报。

2 个答案:

答案 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>

希望这会有所帮助:)。

编辑:。附加的屏幕截图。

reen

答案 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>