diff --git a/README.md b/README.md index 822750209..1ff40dc0d 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ * [Distance between two points](#distance-between-two-points) * [Divisible by number](#divisible-by-number) * [Drop elements in array](#drop-elements-in-array) +* [Element is visible in viewport](#element-is-visible-in-viewport) * [Escape regular expression](#escape-regular-expression) * [Even or odd number](#even-or-odd-number) * [Factorial](#factorial) @@ -305,6 +306,26 @@ const dropElements = (arr,func) => { // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4] ``` +### 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) +``` + ### Escape regular expression Use `replace()` to escape special characters.