andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create element-is-visible-in-viewport.md

Browse Source 
https://codepen.io/anon/pen/MrwYzx

Adjust the `transform: translate()` to test it out
This commit is contained in:
atomiks
2017-12-14 21:34:48 +11:00
committed by GitHub
parent 0d3a58249c
commit ec2a43cb3c
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
snippets/element-is-visible-in-viewport.md Normal file
View File

@ -0,0 +1,19 @@
### Element is visible in viewport
Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values
to determine if a given element is visible in the viewport.
Omit the second argument to determine if the element is entirely visible, or specify `true` to determine if
it is partially visible.
```js
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}
// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
// elementIsInViewport(el) -> false (not fully visible)
// elementIsInViewport(el, true) -> true (partially visible)
```