如何对 div 元素使用“object.addEventListener("resize", myScript)”？

Question

在我尝试将此事件侦听器添加到 div 之前

我正在使用“滚动”，这个可以工作，但“调整大小”不起作用

我不知道为什么。

这是我的代码：

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  content.addEventListener("resize", function(event) {
    now = tabs.clientHeight;

    alert(now + "&" + than);
  }, false);


});

JSFIDDLE 演示

或者有可能是这样的吗：

$('document').ready(function(){ 

                var content = document.getElementById("scroller");
                var hc , h;

                window.addEventListener('resize', function(event){

                    h = event.clientHeight;
               if(h>510) {
                $(".godown").fadeout("0");
                    }
               if(h<510) {
                content.addEventListener('scroll', function(event){
                 hc =  $('#scroller').scrollTop();






                    if (hc){
                   $(".godown").fadeOut("slow");
                   $(".gotop").fadeIn("slow");
                    }
 if (!hc){
                   $(".godown").fadeIn("slow");
                   $(".gotop").fadeOut("slow");

}
             }, false);
 }
                    }, false);
            });

Answer 1

您需要将事件侦听器添加到

window

对象，因为它是窗口大小调整，而不是元素。

window.addEventListener("resize", function(event) {...});

我已经更新了你的jsfiddle在这里你可以看到它的工作原理。

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  window.addEventListener("resize", function(event) {
     now = tabs.clientHeight;
     alert(now + "&" + than);
     }, false);
});

Answer 2

如果有人还有兴趣

您可以使用ResizeObserver

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log('Width', entry.contentRect.width)
  }

  console.log("Size changed");
});

const divEl = document.getElementById('el');

resizeObserver.observe(divEl);

<div id="el">Some Element</div>