JS获取屏幕坐标

最新推荐文章于 2024-09-27 14:38:27 发布

weixin_40442639

最新推荐文章于 2024-09-27 14:38:27 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_40442639/article/details/105467929

版权

本文详细介绍了如何使用JS获取屏幕坐标，包括document.documentElement和document.body的相关属性，如scrollTop、clientHeight、scrollHeight等。同时，探讨了PageX、clientX在不同浏览器的兼容问题，并提供了封装函数示例来获取页面滚动距离和事件触发点位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取JS屏幕坐标

首先我们来了解一下几个关键的对象

documentElement 属性可返回文档的根节点(获取文档中的的元素)。
2.scrollTop() 为滚动条向下移动的距离
document.documentElement.scrollTop 指的是滚动条的垂直坐标
document.documentElement.clientHeight 指的是浏览器可见区域高度

document.documentElement.scrollHeight （浏览器所有内容高度）
document.body.scrollHeight （浏览器所有内容高度）
document.documentElement.scrollTop （始终为0）
document.body.scrollTop （浏览器滚动部分高度）
document.documentElement.clientHeight （浏览器可视部分高度）
document.body.clientHeight （浏览器所有内容高度）

以上对象可以解读为：
浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综合上述的解释，我们在来看
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在文档定义类型已声明的情况下用documentElement，未声明的情况下用body
注释：不同的浏览器获取可视部分的区域不一样。这里是一chrome和Firefox为例。
在这里插入图片描述

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.
可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使用这个：
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
scrollTop代表的是被浏览器滑动条滚过的长度
offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值
注：只有clientX和screenX 是遵循W3C标准的，其他属性都要做兼容，但是chrome 和 safari 支持所有的属性。

下面是一些案例（1,2,3是做练习后整理的案例，这一部分整理做了封装，方便以后使用）：
*1. //获取页面滚动出去得距离的封装
function getPageScroll(){
//逻辑与的短路运算的的规则：找真
//如果这几种情况都不满足，那么就返回undefined 但是有的浏览器不支持undefined
var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

		//函数返回值
		return{
		scrollLeft: left,
		scrollTop : top 
		}
}

// 获取事件触发点到页面左上角的距离
function getPagePoint(e){
var x = e.PageX || getPageScroll().scrollLeft + e.clientX || 0;
var y = e.pageY || getPageScroll().screenTop + e.clientY || 0;
return{
PageX: x,
pageY: y
}
}*

var box = document.getElementById(“box”);

 document.onmousemove = function(e){
     e = e || window.event;
      // 考虑到屏幕滚动的距离

      // box.offsetWidth / 2 盒子自身宽度的 二分之一
     //  box.offsetHeight / 2 盒子高度的 二分之一
     // getPagePoint(e).PageX  鼠标到页面左边的距离
     // getPagePoint(e).pageY 鼠标到页面顶部的距离

      //  盒子离页面左边的距离
     var x = getPagePoint(e).PageX - box.offsetWidth / 2 + "px";
      //  盒子离页面顶部的距离 
     var y = getPagePoint(e).pageY - box.offsetHeight / 2 + "px"

     box.style.left = x;
     box.style.top = y;
 }

以下是一个完整的案例，来自JavaScript公众号主要是帮助自己理解，完全没有抄袭的意思

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="auther" content="fq" />
    <title>获取鼠标坐标</title>
</head>
<body>
<script type="text/javascript">
    function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    function mouseMove(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>