JavaScript MutationObserver 递归调用自身

Question

我正在尝试使用 MutationObserver 来观察 body 元素中样式属性的变化，并将 body 样式属性的溢出属性更改为滚动。当我缩小浏览器窗口时，样式属性会发生变化。Firefox 最终崩溃说无响应脚本。谁能指出我在这里做错了什么。虽然它似乎在 chrome 中正常工作。

我的代码:

var target=document.body;

var Observer=new MutationObserver(function(mutations) {

    mutations.forEach(function(mutationRecord){
        document.body.style.overflow="auto";
    });

});  

Observer.observe(target,{attributes:true,attributeFilter:['style']});

Answer 1

我想从根本上解决这个问题:为什么你的代码的不同部分想要争夺 document.body.style.overflow属性(property)？

但是回答变异观察者的问题:

如果您的目标是确保 document.body.style.overflow设置为 "auto"不管其他地方对它做了什么改变，我只会在它不是你想要的值时改变它:

var Observer=new MutationObserver(function(mutations) {
    if (document.body.style.overflow != "auto") {
        document.body.style.overflow = "auto"
    }
});  

Observer.observe(document.body,{attributes:true,attributeFilter:['style']});

另请注意，不需要 forEach循环。

我猜测，即使属性实际上没有改变，Firefox 也会触发变异观察器，但 Chrome 不会。

---

旁注:我再次强调，最好找到并处理您的代码似乎自相矛盾的事实。但作为突变观察器解决方法的替代方案，这里有一个 CSS 解决方法:一个 !important样式表中的规则会覆盖普通的内联样式。所以

body {
    overflow: auto !important;
}

现在，这不会覆盖 document.body.style.overflow = "none !important" , 但它会覆盖任何不重要的规则，甚至是内联样式规则。