JavaScript开发小技巧之各种浏览器操作 发布时间:2024/12/08 滚动到页面顶部 export const scrollToTop = () => { const height = document.documentElement.scrollTop || document.body.scrollTop; if (height > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, height - height / 8); } } 复制代码 滚动到页面底部 export const scrollToBottom = () => { window.scrollTo(0, document.documentElement.clientHeight); } 复制代码 滚动到指定元素区域 export const smoothScroll = (element) => { document.querySelector(element).scrollIntoView({ behavior: 'smooth' }); }; 复制代码 获取可视窗口高度 export const getClientHeight = () => { let clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } else { clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight; } return clientHeight; } 复制代码 获取可视窗口宽度 export const getPageViewWidth = () => { return (document.compatMode == "BackCompat" ? document.body : document.documentElement).clientWidth; } 复制代码 打开浏览器全屏 export const toFullScreen = () => { let element = document.body; if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen) { element.msRequestFullscreen() } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen() } } 复制代码 退出浏览器全屏 export const exitFullscreen = () => { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } }复制代码 以上是编程学习网小编为您介绍的“JavaScript开发小技巧之各种浏览器操作”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。