彻底弄清楚scrollWidth、clientWidth、screenX和pageX之间的关系

最新推荐文章于 2023-12-07 17:49:34 发布

wanxue0804

最新推荐文章于 2023-12-07 17:49:34 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wanxue0804/article/details/78909244

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>


    <style>

        body {
            margin:0;
            padding:0;
            width: 3000px;
            height: 5000px;
        }

        #box {
            width: 200px;
            height: 1500px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box"></div>

</body>
</html>


<script>

    var box = document.getElementById("box");

    // 页面可视区的宽度
    var oClientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;

    // 页面可视区的高度
    var oClientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;

    // scrollTop 网页被卷起的高度
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // scrollLeft 网页左边被卷起的宽度
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

    // scrollWidth 表示整个网页正文的宽度
    var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;

    // scrollHeight 表示整个网页正文的高度
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

    box.onclick = function(e){
      var oEvent = e || event;
      console.log('相对显示器左边的位置screenX为：' + oEvent.screenX);              //95
      console.log('相对显示器上边的位置screenY为：' + oEvent.screenY);              //152
      console.log('相对可视区左边的位置clientX为：' + oEvent.clientX);              //95
      console.log('相对可视区上边的位置clientY为：' + oEvent.clientY);              //61
      console.log('可视区宽度clientWidth为:' + oClientWidth);                       //1920
      console.log('可视区高度clientHeight为:' + oClientHeight);                     //535
      console.log('点击位置在页面中的纵坐标为：' + (oEvent.clientY + scrollTop));   //1461
      console.log('点击位置在页面中的横坐标为：' + (scrollLeft + oEvent.clientX));  //95
      console.log('页面卷起的高度scrollTop为:' + scrollTop);                        //1400
      console.log('页面左边卷起的宽度为scrollLeft为：' + scrollLeft);               //0
      console.log('页面的宽度为scrollWideth为：' + scrollWidth);                    //3000
      console.log('页面的高度为scrollHeight为：' + scrollHeight);                   //5000

      console.log('点击位置相对页面位置的左边pageX为:' + oEvent.pageX);             //95
      console.log('点击位置相对页面位置的上边pageY为:' + oEvent.pageY);             //1461
    }

</script>

注释应该很清楚了不用过多的解释每个的含义了

pageX 其实就是相对可视区位置clientX + 左边被卷去的宽scrollLeft

pageY 其实就是可相对视区位置clientY + 上边被卷去的宽scrollTop

这样说应该没错吧如果有什么不对希望指正

wanxue0804

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
彻底弄清楚scrollWidth、clientWidth、screenX和pageX之间的关系

body { margin:0; padding:0; width: 3000px; height: 5000px; } #box { width: 200px; height: 1500px; b
复制链接

扫一扫