1, bottomVisible

Returns true if the bottom of the page is visible, false otherwise.

Use scrollY, scrollHeight, and clientHeight to determine if the bottom of the page is visible.

const bottomVisible = () = >
document.documentElement.clientHeight + window.scrollY >= 
document.documentElement.scrollHeight || document.documentElement.clientHeight;
// bottomVisible() -> true
Copy the code

2, currentURL

Returns the current URL.

Use window.location.href to get the current URL.

const currentURL = () = > window.location.href;
// currentUrl() -> 'https://google.com'
Copy the code

3, elementIsVisibleInViewport

Returns true if the specified element is visible in the viewport, false otherwise.

Use Element. GetBoundingClientRect (), and the window. The inner (Width | Height) value to determine whether a given Element in the viewport. Omit the second argument to determine whether the element is fully visible, or specify true to determine whether it is partially visible.

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}
// elementIsVisibleInViewport(el) -> false (not fully visible)
// elementIsVisibleInViewport(el, true) -> true (partially visible)
Copy the code

4, getScrollPosition

Returns the scroll position of the current page.

PageXOffset and pageYOffset are used if defined, otherwise scrollLeft and scrollTop are used. You can omit el to use the default value for window.

const getScrollPosition = (el = window) = >
({x: (el.pageXOffset ! = =undefined)? el.pageXOffset : el.scrollLeft,y: (el.pageYOffset ! = =undefined)? el.pageYOffset : el.scrollTop});// getScrollPosition() -> {x: 0, y: 200}
Copy the code

5, getURLParameters

Returns an object containing the current URL argument.

Use match() with the appropriate regular expression to get all key-value pairs, which array.reduce () maps and merges into a single object. Pass location.search as a parameter to be applied to the current URL.

const getURLParameters = url= >
url.match(/([^?=&]+)(=([^&]*))/g).reduce(
(a, v) = > (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
);
// getURLParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
Copy the code

6, redirect

Redirect to the specified URL.

Use window.location.href or window.location.replace() to redirect to the URL. Pass the second argument to simulate link click (true- default) or HTTP redirect (false).

const redirect = (url, asLink = true) = >
asLink ? window.location.href = url : window.location.replace(url);
// redirect('https://google.com')
Copy the code

7, scrollToTop

Scroll smoothly to the top of the page.

Use the document. The documentElement. ScrollTop or document. The body. The scrollTop get distance from the top. Roll a small part of the distance from the top. Use Windows. RequestAnimationFrame () for animation processing rolling.

const scrollToTop = () = > {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8); }};// scrollToTop()
Copy the code