拉伸画布到全宽和高度的动态调整大小

Question

我有一个页面，其中元素动态添加在彼此之下（并可以拖动）。当元素的数量超过视口高度时，页面的高度变长。与用户将其拖出正常边界一样 - 它变得更宽。

我可以跟踪这件事的事件是什么？ $(window).resize()不起作用，因为该窗口没有真正调整大小。是否有一个我可以处理的事件，而不是像元素被拖动或添加时检查宽度和高度那样的事情？

Fiddle of what I'm talking about。

Answer 1

在您的点击事件中，您想要将高度重新设置为文档高度。

canvas.height = $(document).height(); 

See Fiddle

---

另外，您可以：

$(document).bind('DOMSubtreeModified', function(e) { 
    canvas.height = $(document).height(); 
}); 

但是，这是不建议，因为它会设置高度几乎每次有事到DOM。你可以想象这有多过分。所以最好在你知道扩展页面内容的事件上调用一个函数。

另请注意，这可能无法在IE中使用，因为您可能希望创建自己的函数以在某个间隔（例如50ms）内检查文档的高度。

See Fiddle