jquery 如何侦测元素可见性何时变更(不仅是可见，而且可见/隐藏)

7kjnsjlb 于 2022-11-22 发布在 jQuery

关注(0)|答案(1)|浏览(174)

如何检测页面中的元素何时更改可见性？
请把问题念好。

它不仅是对:visible伪选择器（与display: none匹配）的引用，而且是对visibility可见/隐藏的引用。

经过一些搜索，你可以发现有一个插件，这样做的工作.
下面是代码片段：
第一个
但是它只适用于:visible伪选择器（不适用于visibility可见/隐藏），并且如果您尝试将选择从单个元素$("#test_hidden")扩展到类$(".class")或页面$("*")中的每个元素，则它不能很好地工作。
那么，最后，如何检测页面元素何时改变可见性呢？
有一种方法可以修改它，也 checkout elem.css("visibility","hidden") == true，并为所有元素$("*")启用它，或者还有其他方法可以得到所需的结果？

jquery

来源：https://stackoverflow.com/questions/74381865/how-to-detect-when-the-element-visibility-changes-not-only-visible-but-also-v

1条答案

按热度按时间

kwvwclae1#

下面是一个示例，说明如何监控内联样式以及内部或外部样式表的 CSS visibility 更改。您可以注解掉任何部分（内联/内部/外部），以查看它是否专门使用该方法。
注意，并不是所有的浏览器都支持这种方式，因为 IntersectionObserver 构造函数中的 trackVisibility 选项只得到有限的支持。而且，这种方式计算可见性的开销更大（虽然可能比 window.getComputedStyle 的轮询开销小）， Chrome 会在控制台中提供以下警告：
可见性的计算比基本交点的计算更昂贵 ;启用此选项可能会对页面的性能产生负面影响。请确保在启用 " trackVisibility " 选项之前您 * 确实 * 需要可见性跟踪。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SO Detect CSS visibility changes</title>
  </head>
  <style>
    #div {
      visibility: visible;
    }
  </style>
  <body>
    <div id="div">I use visibility CSS</div>
    <div>I do not use visibility CSS</div>
    <script type="module">
      const style = document.createElement('style')
      const link = document.createElement('link')
      const div = document.getElementById('div')
      const mutationObserver = new MutationObserver((mutations) => {
        const visibility = window
          .getComputedStyle(mutations[0].target)
          .getPropertyValue('visibility')

        if (visibility === 'hidden') {
          console.log('[MO]: element is hidden')
        }

        if (visibility === 'visible') {
          console.log('[MO]: element is visible')
        }
      })
      const intersectionObserver = new IntersectionObserver((entries) => {
        const isVisible = entries[0].isVisible

        if (isVisible) {
          console.log('[IO]: element is visible')
        } else {
          console.log('[IO]: element is hidden')
        }
      }, {
        // Supported in Chrome
        trackVisibility: true,
        delay: 100
      })

      // Respond to visibility changes that are handled via inline CSS
      mutationObserver.observe(div, {
        attributes: true,
        attributeFilter: ['style']
      })
      // Respond to visibility changes that are handled via internal/external CSS stylesheets
      intersectionObserver.observe(div)

      // Hide visibility
      setTimeout(() => {
        // Inline styles
        div.style.visibility = 'hidden'

        // Internal Stylesheet
        style.id = 'style'
        style.innerText = `
          #div {
            visibility: hidden;
          }
        `
        document.head.append(style)

        // External Stylesheet
        link.id = 'link'
        link.href = './styles.css'
        link.rel = 'stylesheet'
        //document.head.append(link)

        // Unhide visibility
        setTimeout(() => {
          document.getElementById('style').remove()
          //document.getElementById('link').remove()
          div.style.visibility = 'visible'
        }, 2000)
      }, 1000)
    </script>
  </body>
</html>

中的每一个
基本上，这相当于：

使用 MutationObserver 检测对 visibility 的内联更改。
对于包含观察目标的 visibility 值的内部和外部样式表，请使用 IntersectionObserver 和 trackVisibility 选项（在支持的浏览器中）。

这里有一个关于 CodeSandbox 的例子。

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 如何侦测元素可见性何时变更(不仅是可见，而且可见/隐藏)

1条答案

相关问题

热门标签

最新问答