0

我正在一个网站上使用可滚动的画布列表来绘制数据，并且每当它们所在的 div 的宽度发生变化时，我都需要调整画布的大小。

我在大多数情况下都可以使用它，但是如果我删除了一个使滚动条消失的绘图，它就不起作用了。我尝试了以下方法，其中 plotsScroller 是带有滚动条的 div，而 plotsList 是其中的内容：

    $scope.isScrollingPlotsList = function() {
        return plotsList.offsetHeight > plotsScroller.offsetHeight;
    }

    $scope.$watch('isScrollingPlotsList()', $scope.$apply);

这段代码可以工作，除非$digest在移除滚动条的回流之后没有发生任何事情；$digest当我删除一个情节时会调用它，但我猜回流会在以后发生。

有谁知道我如何在不使用的情况下检测回流$timeout？

4

1 回答 1

1

您可以使用Mutation Observers来检测 DOM 中的变化。当发生更改时，您将收到通知，并且可以遍历以查看更改的内容。

使用示例（来源）：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

另请参阅源链接以获取详细信息。

所有主流浏览器都应该支持它，包括。IE11。对于 [IE9, IE11> 有一个可以使用的polyfill 。

规范

于 2015-02-20T04:20:19.860 回答