VanillaJS：在浏览器窗口调整大小时更新变量值;需要更新clientHeight变量值

Question

使用VanillaJS，如何在调整浏览器窗口大小时更新变量的值？我的项目的主要目标是在给定页面高度的情况下跟踪用户在页面上的距离。

var clientHeight = document.body.clientHeight;
var clientHeight25 = clientHeight * .25;
var clientHeight50 = clientHeight * .50;
var clientHeight75 = clientHeight * .75;

让我们说这个例子clientHeight等于1000.当我调整浏览器窗口的大小时，它的值增加到1500.当我在浏览器调整大小后检查控制台中clientHeight50的值时，它的值是相同的和之前一样（500）。在没有在控制台中造成污染的情况下更新此更新的最佳方法是什么？

Answer 1

您可以侦听window resize event并在发生变量时更新变量：

window.addEventListener("resize", function(event) {
  // update your variables
});

您可能还想听orientation changes。

另请参阅评论中@PHPglue所指出的scroll事件。