JS开发-常用短函数-浏览器

1.底部可见

如果页面底部可见则返回 true，否则返回 false。使用scroll Y、scroll Height和clientHeight来确定页面底部是否可见。

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

2、当前网址

返回当前 URL。

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

使用window.location.href 获取当前URL。

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

3、elementIsVisibleInViewport

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

如果指定元素在图像端口中可见，则返回 true，否则返回 false。

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

使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 确定特定元素在视口中是否可见。省略第二个参数以指定元素是否完全可见，或指定 true 以指定元素是否部分可见。

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)

4。 getScrollPosition

返回当前页面的滚动点。

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

如果指定，则使用pageXOffset和pageYOffset，否则scrollLeft和scroll顶。对于窗口默认值，可以省略 el。

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}

5.getURL参数

返回包含当前 URL 参数的对象。

使用 match() 和适当的正则表达式来获取所有键值对。 Array.reduce() 可以将它们映射并组合成一个对象。输入 location.search 作为用于当前 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'}

6、重定向

重定向到指定的 URL。

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

使用 window.location.href 或 window.location.replace() 重定向到 URL。传递另一个模拟链接点击（true - 默认）或 HTTP 重定向（false）的参数。

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

7、scroll至始至终

平滑滚动到页面顶部。

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

使用 document.documentElement.scrollTop 或 document.body.scrollTop 获取距顶部的距离。从顶部滚动一小部分距离。使用 window.requestAnimationFrame() 函数来设置滚动动画。

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