将画布拉伸到全宽和高度以进行动态调整大小

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();
});

但不建议这样做，因为几乎每次DO​​M出现问题时都会设置高度。你可以想象这有多么过分。因此，最好在您知道会扩展页面内容的事件上调用函数。

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

See Fiddle