元素何时变为可见的事件侦听器？

javascript

2022-08-30 02:02:28

我正在构建一个将包含在页面中的工具栏。它将包含在其中的 div 将默认显示为：none。有没有办法在我的工具栏上放置一个事件侦听器，以便在它变为可见时进行侦听，以便它可以初始化？还是我必须从包含页面向它传递一个变量？

谢谢

答案 1

展望未来，新的 HTML Intersection Observer API 就是您正在寻找的。它允许您配置一个回调，只要一个元素（称为目标）与设备视口或指定元素相交，就会调用该回调。它在最新版本的Chrome，Firefox和Edge中可用。有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。

观察显示的简单代码示例：无切换：

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

function respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement,
  };

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

在行动中：https://jsfiddle.net/elmarj/u35tez5n/5/

答案 2

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

我可能有点晚了，但你可以使用MututingObserver来观察所需元素的任何变化。如果发生任何更改，您只需检查元素是否显示即可。