更改网页高度时监听事件？答案

【问题标题】：Listen for event when web page height is changed?更改网页高度时监听事件？
【发布时间】：2014-05-07 18:14:08
【问题描述】：

有没有办法在每次通过 JavaScript 更改网页 height 时运行一些代码？（网页 height 本身，而不是浏览器高度。）如果可能的话，我宁愿不使用 jQuery。如果这不可能，是否有另一种方法来完成以下操作？

我正在为位于页面底部的div 的height 更改设置动画，由用户单击按钮触发。我希望页面在发生这种情况时保持滚动到页面底部。我想我可以监听height 更改事件并每次更新滚动位置，然后它会很流畅。我目前的做法是等到动画完成再滚动到底部，但是这个没有动画效果，明显是延迟到整个height更新完之后。

当前代码：
JS：

var myDiv = document.querySelector("#myDiv");
var activeClass = "activeDiv";
if (myDiv.className == activeClass) {
    myDiv.className = "";
}
else {
    myDiv.className = activeClass;
    setTimeout("window.scrollTo(0,document.body.scrollHeight)", 150);
 }

CSS：

#myDiv {
    max-height: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.activeDiv {
    max-height: 500px !important;
}

【问题讨论】：

你有一些代码吗？还有什么会影响 div 的高度（如果不是浏览器高度变化）？ AJAX 调用的响应？
一般情况下，通过 Javascript 进行更改时不会触发事件，只有在用户交互时才会触发事件。
您可以使用setInterval定期检查高度，看看是否有变化。
检查stackoverflow.com/questions/14866775/… 如果每 x 秒后手动检查是可以接受的
如果您不想轮询或修补每个内容入口点，您可以订阅 dom 突变事件，并在每次触发后检查高度。

标签： javascript html css dom-events

【解决方案1】：

您可能想查看以前的帖子：Detect Document Height Change

我为您看到了 2 个解决方案。接受的答案向您展示了如何检查文档高度。每次您进行会导致文档高度更改的 ajax 调用时都可以调用它。该帖子的另一个选项是使用setInterval()。基本上你可以使用相同/相似的功能，然后每隔x 秒检查一次。

【讨论】：

【解决方案2】：

我想多了。我通过在动画发生时非常频繁地更新滚动位置来实现所需的行为，然后在完成后停止更新。这不是最干净的代码，也不是最流畅的动画（在 Safari 上明显比在 Chrome 上更流畅），但总比没有动画好。

我只是简单地将 else 语句中的代码替换为：

legal.className = activeClass;
var timer = setInterval(function() { window.scrollTo(0,document.body.scrollHeight) }, 5);
setTimeout(function() { clearInterval(timer) }, 500);

【讨论】：