Is there a way to determine whether elementA is "behind" another element and thus elementA would not be visible to the user?
Obviously it's possible to do with stacking context, but the thing is that we do not know which elements we should be looking at. Therefore we would have to iterate through all the elements in DOM and perform stacking context comparison for multiple elements. That is not good in terms of performance.
Here's a jsfiddle. So is there a way to determine that #hidden-element is not visible to the user, because another element is rendered on top of it?
https://jsfiddle.net/b9dek40b/5/
HTML:
<div id="covering-element"></div>
<div>
<div id="hidden-element"></div>
</div>
Styles:
#covering-element {
position: absolute;
width: 100px;
height: 100px;
background: darksalmon;
text-align: center;
}
#hidden-element {
width: 25px;
height: 25px;
background: deeppink;
}
To check if two elements overlap, use the getBoundingClientRect() method to get an object containing information about the relative position to the viewport of the elements. Then, compare the boundary edges (top, right, bottom, left) of the two rectangles.
contains() method checks if an element is inside another, and returns a boolean: true if it is, and false if it's not. Call it on the parent element, and pass the element you want to check for in as an argument.
In JavaScript, the quickest way to check if an element is hidden or visible in DOM is to use the getComputedStyle() method. This method returns the actual values of CSS properties used to render an HTML element in DOM. An HTML element can be hidden due to either display:none or visibility:hidden CSS properties.
Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport. Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.
Our solution was to use couple things to determine whether the element is visible and not behind any other elements. Here's the methods we used.
visibility:hidden
and display:none
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With