获取视口宽高、获取鼠标位置、获取元素位置、获取滚动距离

获取视口宽高

<script>
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
</script>

获取滚动距离

<script>
var scrollTop=window.pageYOffset || document.documentElement.scrollTop
</script>

获取鼠标位置

<script>
function getMouse(event){
//相对于浏览器窗口的距离(不包含滚动的距离)
var mouseLeft = event.clientX
var mouseTop = event.clientY
//相对于文档的距离
var mouseLeft = event.pageX
var mouseTop = event.pageY
}
</script>

获取元素位置(相对于浏览器窗口,会随着滚动而改变)

<script>
var a = document.querySelector('.a')
var aa = a.getBoundingClientRect()
aa.top //元素上边框相对于窗口的上边高度
aa.left //元素左边框相对于窗口的左边的距离
</script>

posted @   SmileBlog  阅读(65)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示