Build README
This commit is contained in:
21
README.md
21
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.
|
||||
|
||||
Reference in New Issue
Block a user