确定元素是否落后于另一个元素

时间:2018-04-10 10:33:21

标签: javascript browser

有没有办法确定elementA是否在另一个元素“后面”,因此elementA对用户不可见?

显然可以使用stacking context,但问题是我们不知道应该关注哪些元素。因此,我们必须遍历DOM中的所有元素并对多个元素执行堆叠上下文比较。这在性能方面并不好。

这是一个jsfiddle。那么有没有办法确定#hidden-element对用户不可见,因为另一个元素是在它上面呈现的?

https://jsfiddle.net/b9dek40b/5/

HTML:

<div id="covering-element"></div>
<div>
  <div id="hidden-element"></div>
</div>

样式:

#covering-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background: darksalmon;
  text-align: center;
}

#hidden-element {
  width: 25px;
  height: 25px;
  background: deeppink;
}

1 个答案:

答案 0 :(得分:1)

我们的解决方案是使用几个东西来确定元素是否可见而不是任何其他元素。这是我们使用的方法。

  1. window.getComputedStyle检查visibility:hiddendisplay:none
  2. 来自多个点的
  3. document.elementFromPoint。最常见的情况可能是通过检查所有角落来处理。虽然我们需要更多积分来获得更强大的结果。可以使用Element.getBoundingClientRect()
  4. 轻松检查角坐标

    https://jsfiddle.net/k591Lbwu/27/

    HTML

    <div id="covering-element"></div>
    <div>
      <div id="hidden-element"></div>
    </div>
    
    <button style="margin-top:100px">Check visibility</button>
    

    CSS

    #covering-element {
      position: absolute;
      width: 100px;
      height: 100px;
      background: darksalmon;
      text-align: center;
    }
    
    #hidden-element {
      width: 25px;
      height: 25px;
      background: deeppink;
    }
    

    的JavaScript

    document.querySelector('button').addEventListener('click', function() {
        const element = document.getElementById('hidden-element')
      alert('Visible = '+isVisible(element))
    })
    
    function isVisible(element) {
      if(!isVisibleByStyles(element)) return false
      if(isBehindOtherElement(element)) return false
      return true
    }
    
    function isVisibleByStyles(element) {
        const styles = window.getComputedStyle(element)
      return styles.visibility !== 'hidden' && styles.display !== 'none'
    }
    
    function isBehindOtherElement(element) {
      const boundingRect = element.getBoundingClientRect()
      // adjust coordinates to get more accurate results
      const left = boundingRect.left + 1
      const right = boundingRect.right - 1
      const top = boundingRect.top + 1
      const bottom = boundingRect.bottom - 1
    
      if(document.elementFromPoint(left, top) !== element) return true
      if(document.elementFromPoint(right, top) !== element) return true
      if(document.elementFromPoint(left, bottom) !== element) return true
      if(document.elementFromPoint(right, bottom) !== element) return true
    
      return false
    }