JS学习--文档坐标和视口坐标--2021-03-29

最新推荐文章于 2024-07-06 00:11:00 发布

张德帅-001

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量179

点赞数 1

分类专栏：文档坐标和视口坐标 JS 文章标签： js javascript

本文链接：https://blog.csdn.net/A2113438464/article/details/115306808

版权

JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

文档坐标和视口坐标

1 篇文章 0 订阅

订阅专栏

文档坐标和视口坐标

今天了解到两个新的知识：文档坐标和视口坐标。 元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。

坐标系有两个不同的原点，下述我将画图述解：
这是文档原点
在这里插入图片描述
这是视口原点

为了在坐标系之间互相转换，我们需要判定浏览器窗口的滚动条的位置。Window对象的pageXOffset和pageYOffset属性在所有的浏览器中提供这些值。

	//当触发滚动条的滚动事件时，获取滚动条的偏移量
    function getPageOffset() {
      return {
        x:window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ,
        y:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 
      };
    }
    //滚动条滚动事件 
    window.onscroll = function() {
      console.log(getPageOffset());
    }
	/*
      一、
      pageXOffset和pageYOffset为window对象提供，获得浏览器窗口的滚动条的位置
      二、
      也可通过：查询文档的根节点（document.documentElement）的scrollLeft和scrollTop属性来获得位置
      三、
      但在怪异模式下，必须在文档的<body>元素（document.body)的scrollLeft和scrollTop上查询它们
      
      下述代码同理
    */

有时能够判定视口的尺寸也是非常有用的。例如，为了确定文档的哪些部分是当前可见的。

	//当触发窗口尺寸改变事件，获取每次视口的尺寸
    function getViewportSize() {
      return {
        width:window.innerWidth || window.document.documentElement.clientWidth || window.document.body.clientWidth ,
        height:window.innerHeight || window.document.documentElement.clientHeight || window.document.body.clientHeight
      };
    }
    //触发窗口尺寸改变事件
    window.onresize = function() {
      console.log(getViewportSize());
    }

张德帅-001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS学习--文档坐标和视口坐标--2021-03-29

文档坐标和视口坐标今天了解到两个新的知识：文档坐标和视口坐标。元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。坐标系有两个不同的原点，下述我将画图述解：...
复制链接

扫一扫