如何检测CSS3调整大小事件

How to detect CSS3 resize events

本文关键字：CSS3 调整 大小事 小事件 检测 何检测      更新时间：2023-09-26

CSS3 resize属性可以分配给任意元素。我正在寻找一种方法来检测divs上的这种调整大小(我不介意它目前只在Firefox中工作(：

div {
  resize: horizontal;
  overflow: hidden;
}

不幸的是，似乎没有在div上触发onresize事件。当这样的用户实例化的resize发生时，我如何在JavaScript中检测？

编辑：FWIW我在Mozilla上打开了一个错误报告。如果要跟踪它：https://bugzilla.mozilla.org/show_bug.cgi?id=701648

调整大小就像是一种样式更改。因此，它可以用突变观察者来观察。更具体的ResizeObserver可能更好：

let observer = new ResizeObserver(function(mutations) {
  console.log('mutations:', mutations);
});
let child = document.querySelector('textarea');
observer.observe(child);
<textarea></textarea>

收听DOMAttrModified事件。根据这个答案，这个jsFiddle似乎可以在Firefox8中工作(如果你打开控制台(。

由于resize事件显然不起作用(至少目前(，您可以尝试以下替代选项之一：

  1. 使用mousedown、mousemove和/或mouseup的组合来判断div是否正在调整大小。如果您想要真正细粒度的控制，您可以在每个mousemove事件中检查div的大小。如果您不需要，您可以简单地根本不使用mousemove，只需测量mousedown和mouseup中的div，并确定后者中是否调整了其大小
  2. 每200毫秒左右轮询一次(根据您的需要(，并将当前大小与上次已知大小进行比较。参见setTimeout()

您可以使用css元素的ResizeSensor类从查询polyfill

https://github.com/marcj/css-element-queries

它允许您对所有类型的元素(不仅仅是window(的大小更改调用javascript函数。它设置了一个真正的传感器，而不是javascript setTimeout轮询。

这样使用：

new ResizeSensor($('#myelement'), function() {
    console.log("myelement's size has changed");
});

支持的浏览器有：全部包括IE6+。

这似乎对我很有效：

$("body").on('mousedown mousemove', ".resizeItem", function () {
    console.log($(this).height());
})

"使用mousedown、mousemove和/或mouseup的组合">

按照Felixs的回答。

当将自定义搜索结果面板与Dev Extremes Scroll View相结合，并且您希望完全控制它时，特别有用。

$("body").on('mousedown mousemove', ".scrollContainer", function () {
    var h = $(this).height() - 20;
    $(".scrollArea").dxScrollView('instance').option('height', h);
});

根据这个网站，它只在InternetExplorer9中工作。

试试这把小提琴：http://jsfiddle.net/maniator/3Zva3/

相关文章：