如何观察 DOM 元素位置变化

【问题标题】：How to observe DOM element position changes如何观察 DOM 元素位置变化
【发布时间】：2020-01-17 17:18:23
【问题描述】：

我需要观察一个 DOM 元素的位置，因为我需要显示一个相对于它的弹出面板（但不在同一个容器中），并且面板应该跟随元素。我应该如何实现这样的逻辑？

这是一个 sn-p，您可以在其中看到外部和嵌套弹出面板的打开，但它们不跟随水平滚动。我希望他们都关注它并继续显示在相应的图标附近（它应该是一种适用于任何地方的通用方法）。您可能会忽略嵌套弹出窗口没有与外部一起关闭 - 这只是为了使 sn-p 更简单。我预计除了showPopup 函数之外没有任何变化。对于这个例子，标记被特别简化了；不要试图改变它——我需要它。

~function handlePopups() {
  function showPopup(src, popup, popupContainer) {
    var bounds = popupContainer.getBoundingClientRect()
    var bb = src.getBoundingClientRect()

    popup.style.left = bb.right - bounds.left - 1 + 'px'
    popup.style.top = bb.bottom - bounds.top - 1 + 'px'

    return () => {
      // fucntion to cleanup handlers when closed
    }
  }

  var opened = new Map()

  document.addEventListener('click', e => {
    if (e.target.tagName === 'I') {
      var wasActive = e.target.classList.contains('active')
      var popup = document.querySelector(`.popup[data-popup="${e.target.dataset.popup}"]`)

      var old = opened.get(popup)

      if (old) {
        old.src.classList.remove('active')
        popup.hidden = true
        old.close()
        opened.delete(old)
      }

      if (!wasActive) {
        e.target.classList.add('active')
        popup.hidden = false

        opened.set(popup, {
          src: e.target,
          close: showPopup(e.target, popup, document.querySelector('.popup-dest')),
        })
      }
    }
  })
}()

~function syncParts() {
  var scrollLeft = 0

  document.querySelector('main').addEventListener('scroll', e => {
    if (e.target.classList.contains('inner') && e.target.scrollLeft !== scrollLeft) {
      scrollLeft = e.target.scrollLeft
      void [...document.querySelectorAll('.middle .inner')]
           .filter(x => x.scrollLeft !== scrollLeft)
           .forEach(x => x.scrollLeft = scrollLeft)
    }
  }, true)
}()
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body, main {
  height: 100%;
  margin: 0;
}

main {
  display: grid;
  grid-template: auto 1fr 17px / auto 1fr auto;
}

section {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: 1px dotted red;
  outline-offset: -1px;
  position: relative;
}

.inner {
  overflow: scroll;
  padding: 0 1px 1px 0;
  margin: 0 -18px -18px 0;
  flex: 1 1 0px;
  display: flex;
  flex-direction: column;
}

.top {
  grid-row: 1;
}

.bottom {
  grid-row: 2;
}

.left {
  grid-column: 1;
}

.middle {
  grid-column: 2;
}

.right {
  grid-column: 3;
}

.wide, .scroller {
  width: 2000px;
  flex: 1 0 1px;
}

.wide {
  background: repeating-linear-gradient(to right, rgba(0,255,0,.5), rgba(0,0,255,.5) 16em);
}

.visible-scroll .inner {
  margin-top: -1px;
  margin-bottom: 0;
}

.scroller {
  height: 1px;
}

.popup-dest {
  pointer-events: none;
  grid-row: 1 / 3;
  position: relative;
}

.popup {
  position: absolute;
  border: 1px solid;
  pointer-events: all;
}

.popup-outer {
  width: 8em;
  height: 8em;
  background: silver;
}

.popup-nested {
  width: 5em;
  height: 5em;
  background: antiquewhite;
}

i {
  display: inline-block;
  border-radius: 50% 50% 0 50%;
  border: 1px solid;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  cursor: pointer;
}

i::after {
  content: "i";
}

i.active {
  background: rgba(255,255,255,.5);
}
<main>
  <section class="top left">
    <div><div class="inner">
      <div>Smth<br>here</div>
    </div></div>
  </section>
  <section class="top middle">
    <div class="inner">
      <div class="wide">
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
      </div>
    </div>
  </section>
  <section class="top right">
    <div class="inner">Smth here</div></section>
  <section class="bottom left">
    <div class="inner">Smth here</div>
  </section>
  <section class="bottom middle">
    <div class="inner">
      <div class="wide"><script>document.write("Smth is here too... ".repeat(1000))</script></div>
    </div>
  </section>
  <section class="bottom right">
    <div class="inner">Smth here</div>
  </section>
  <section class="middle visible-scroll">
    <div class="inner">
      <div class="scroller"></div>
    </div>
  </section>
  <section class="middle popup-dest">
    <div class="popup popup-outer" data-popup="outer" hidden>
      <i  data-popup="nested" style="margin-left:5em;margin-top:5em;"></i>
    </div>
    <div class="popup popup-nested" data-popup="nested" hidden>
    </div>
  </section>
</main>

现在我有以下想法：

  • 在body的capturing阶段监听scroll事件，通过getBoundingClientRect获取元素的实际位置，并根据当前位置重新定位面板。我目前正在使用类似的解决方案，但是有一个问题。当元素被另一个脚本移动时，它不会强制面板重新定位。其中一种情况——当元素本身是另一个面板时——对不相关的滚动事件的简单过滤会过滤掉这样的滚动。我也有一些反跳的情况，它们也很难处理。

  • 创建IntersectionObserver 以跟踪移动。问题似乎在于它仅适用于交叉口大小的变化，而不适用于任何移动。我有一个想法，将rootMargin 的视口裁剪为元素覆盖的同一个矩形，但选项是只读的。这意味着我需要在每次移动时创建新的观察者。我不确定这种解决方案对性能的影响。另外因为它只提供了一个大概的位置，所以我认为我无法消除对getBoundingClientRect 的调用。

  • 作为卷轴的混合解决方案通常需要一些连续的时间。使用IntersectionObserver 之前的想法，但是当检测到第一个移动时，只需订阅requestAnimationFrame 并检查那里的元素位置。虽然位置不同，但处理它并递归使用requestAnimationFrame。如果位置相同（我不确定一帧是否足够，可能是 5 帧？），停止订阅requestAnimationFrame 并创建一个新的IntersectionObserver。

恐怕这样的解决方案会出现性能问题。在我看来，它们也太复杂了。也许有一些我应该使用的已知解决方案？

【问题讨论】：

  • 你考虑过MutationObserver
  • @Tschallacka，我认为MutationObserver 没有涵盖位置变化（尤其是由于父母之一的滚动），是吗？
  • 好吧，您希望事物与另一事物相关。因此，只要进行了相对放置，它就应该保持这种状态。除非你是绝对定位还是固定定位？你能分享一下你现在的行为stackoverflow.com/help/minimal-reproducible-example吗？
  • "我担心这样的解决方案会出现性能问题。而且在我看来它们太复杂了。"您实际遇到了哪些具体的性能问题?仅仅对代码有一种不好的感觉并不是真正可以解决的。同样，客观而言，什么是“过于复杂”？复杂的代码本身不是问题。如果您有客户或您的老板或老师要求以某种方式编写代码（例如，每个函数 1 件事，n 代码行或更少等），请在问题中表达这些要求，而不仅仅是说“似乎太复杂了”。
  • 虽然我们在这里允许自答题，但请确保问题能够被其他人回答，并尽可能简洁。由于问题是目前写的，其他人很难给出一个好的简洁答案。

标签： javascript performance scroll requestanimationframe intersection-observer


【解决方案1】：

第一种方法的实施。只需订阅整个文档中的所有scroll 事件并更新处理程序中的位置。您不能按 src 元素的父级过滤事件，因为事件链中未显示嵌套弹出滚动元素。

如果以编程方式移动弹出窗口也不起作用 - 当outer 弹出窗口移动到另一个图标并且nested 停留在旧位置时，您可能会注意到它。

function showPopup(src, popup, popupContainer) {
  function position() {
    var bounds = popupContainer.getBoundingClientRect()
    var bb = src.getBoundingClientRect()

    popup.style.left = bb.right - bounds.left - 1 + 'px'
    popup.style.top = bb.bottom - bounds.top - 1 + 'px'
  }

  position()
  document.addEventListener('scroll', position, true)

  return () => { // cleanup
    document.removeEventListener('scroll', position, true)
  }
}

完整代码：

~function syncParts() {
  var sl = 0

  document.querySelector('main').addEventListener('scroll', e => {
    if (e.target.classList.contains('inner') && e.target.scrollLeft !== sl) {
      sl = e.target.scrollLeft
      void [...document.querySelectorAll('.middle .inner')]
           .filter(x => x.scrollLeft !== sl)
           .forEach(x => x.scrollLeft = sl)
    }
  }, true)
}()

~function handlePopups() {
  function showPopup(src, popup, popupContainer) {
    function position() {
      var bounds = popupContainer.getBoundingClientRect()
      var bb = src.getBoundingClientRect()

      popup.style.left = bb.right - bounds.left - 1 + 'px'
      popup.style.top = bb.bottom - bounds.top - 1 + 'px'
    }

    position()
    document.addEventListener('scroll', position, true)

    return () => { // cleanup
      document.removeEventListener('scroll', position, true)
    }
  }

  var opened = new Map()

  document.addEventListener('click', e => {
    if (e.target.tagName === 'I') {
      var wasActive = e.target.classList.contains('active')
      var popup = document.querySelector(`.popup[data-popup="${e.target.dataset.popup}"]`)

      var old = opened.get(popup)

      if (old) {
        old.src.classList.remove('active')
        popup.hidden = true
        old.close()
        opened.delete(old)
      }

      if (!wasActive) {
        e.target.classList.add('active')
        popup.hidden = false

        opened.set(popup, {
          src: e.target,
          close: showPopup(e.target, popup, document.querySelector('.popup-dest')),
        })
      }
    }
  })
}()
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body, main {
  height: 100%;
  margin: 0;
}

main {
  display: grid;
  grid-template: auto 1fr 17px / auto 1fr auto;
}

section {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: 1px dotted red;
  outline-offset: -1px;
  position: relative;
}

.inner {
  overflow: scroll;
  padding: 0 1px 1px 0;
  margin: 0 -18px -18px 0;
  flex: 1 1 0px;
  display: flex;
  flex-direction: column;
}

.top {
  grid-row: 1;
}

.bottom {
  grid-row: 2;
}

.left {
  grid-column: 1;
}

.middle {
  grid-column: 2;
}

.right {
  grid-column: 3;
}

.wide, .scroller {
  width: 2000px;
  flex: 1 0 1px;
}

.wide {
  background: repeating-linear-gradient(to right, rgba(0,255,0,.5), rgba(0,0,255,.5) 16em);
}

.visible-scroll .inner {
  margin-top: -1px;
  margin-bottom: 0;
}

.scroller {
  height: 1px;
}

.popup-dest {
  pointer-events: none;
  grid-row: 1 / 3;
  position: relative;
}

.popup {
  position: absolute;
  border: 1px solid;
  pointer-events: all;
}

.popup-outer {
  width: 8em;
  height: 8em;
  background: silver;
}

.popup-nested {
  width: 5em;
  height: 5em;
  background: antiquewhite;
}

i {
  display: inline-block;
  border-radius: 50% 50% 0 50%;
  border: 1px solid;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  cursor: pointer;
}

i::after {
  content: "i";
}

i.active {
  background: rgba(255,255,255,.5);
}
<main>
  <section class="top left">
    <div><div class="inner">
      <div>Smth<br>here</div>
    </div></div>
  </section>
  <section class="top middle">
    <div class="inner">
      <div class="wide">
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
        <i data-popup="outer" style="margin-left:10em"></i>
      </div>
    </div>
  </section>
  <section class="top right">
    <div class="inner">Smth here</div></section>
  <section class="bottom left">
    <div class="inner">Smth here</div>
  </section>
  <section class="bottom middle">
    <div class="inner">
      <div class="wide"></div>
    </div>
  </section>
  <section class="bottom right">
    <div class="inner">Smth here</div>
  </section>
  <section class="middle visible-scroll">
    <div class="inner">
      <div class="scroller"></div>
    </div>
  </section>
  <section class="middle popup-dest">
    <div class="popup popup-outer" data-popup="outer" hidden>
      <i  data-popup="nested" style="margin-left:5em;margin-top:5em;"></i>
    </div>
    <div class="popup popup-nested" data-popup="nested" hidden>
    </div>
  </section>
</main>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2013-10-18
    • 2014-02-15
    • 1970-01-01
    • 2021-05-22
    • 1970-01-01
    • 2016-03-29
    • 1970-01-01
    • 2019-09-11
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode