调整观察者大小

反应式 响应式 ResizeObserver
2021-01-16 09:25:34
50 0 0

创建反应式和响应式的网站以前被认为是高级的,但是响应性是成功的网站和应用程序的必要条件。我们增加了媒体的质疑,matchMedia以及其他的API,帮助开发者主机使反应更容易,现在我们得到了一个新问题: ResizeObserver。借助Resize Observer API,我们可以监视各个元素的大小!

使用 ResizeObserver

要侦听元素的大小更改,请创建一个ResizeObserver实例并调用observe,并传递一个元素:

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Now do something with the resized element
    if (entry.contentRect.width < 1000) {
      // Stop making AJAX calls for content...
    }
  }
});
observer.observe(document.querySelector('div'));

Anentry为您提供了目标元素及其尺寸和位置:

entry = {
  target: div, // The element passed to `observe`
  contentRect: {
  bottom: 88,
  height: 88,
  left: 0,
  right: 1043,
  top: 0,
  width: 1043,
  x: 0,
  y: 0
  }
}

媒体查询和matchMedia提供了一个通过CSS调整显示的机会,但不是功能,这是ResizeObserver适合的地方。

几年前,我创建了一个黑客来监视使用CSS、媒体查询和:以前的元素,但它需要通过JavaScript轮询才能正常工作。有一个合法的,优化的JavaScript API来完成同样的任务是令人耳目一新并且迫切需要的!

作者介绍

用微信扫一扫

收藏