Build README

This commit is contained in:
Angelos Chalaris
2017-12-14 13:04:09 +02:00
parent 78e8c48e85
commit e6d89428f2

View File

@ -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.