前端常用工具类

如何获取当前页面的滚动位置？

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}

如何平滑滚动到页面顶部

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

scrollToTop()

如何确定设备是移动设备还是台式机/笔记本电脑？

const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
? ‘Mobile’
: ‘Desktop’

// 事例
detectDeviceType() // “Mobile” or “Desktop”

如何创建一个包含当前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?n=Adam&s=Smith’) // {n: ‘Adam’, s: ‘Smith’}
getURLParameters(‘google.com’) // {}

如何将字符串复制到剪贴板？

const copyToClipboard = str => {
const el = document.createElement(‘textarea’)
el.value = str
el.setAttribute(‘readonly’, ‘’)
el.style.position = ‘absolute’
el.style.left = ‘-9999px’
document.body.appendChild(el)
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false
el.select()
document.execCommand(‘copy’)
document.body.removeChild(el)
if (selected) {
document.getSelection().removeAllRanges()
document.getSelection().addRange(selected)
}
}
// 事例
copyToClipboard(‘Lorem ipsum’)

作者：Ronin郑
链接：https://juejin.cn/post/6899344555653464077
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。