JS基础 空间坐标

视口与文档

首先理解视口（窗口）与文档的含义

• 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸
• 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等
• 当你打开控制台后，视口尺寸就相应变小了
• position使用文档定位，fixed使用视口定位
• 文档坐标在页面滚动时不发生改变
• 视口坐标的操作需要考虑滚动条的位置

视口与文档尺寸

视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置

方法说明注意window.innerWidth视口宽度包括滚动条（不常用）window.innerHeight视口高度包括滚动条（不常用）document.documentElement.clientWidth视口宽度document.documentElement.clientHeight视口高度 几何尺寸

元素在页面中拥有多个描述几何数值的尺寸，下面截图进行了形象的描述。

坐标都是从左上角计算，这与CSS中的 right / bottom 等不同

方法列表

下面是获取尺寸的方法或属性

方法说明备注element.getBoundingClientRect返回元素在视口坐标及元素大小，包括外边距，width/height与offsetWidth/offsetHeight匹配窗口坐标element.getClientRects行级元素每行尺寸位置组成的数组element.offsetParent拥有定位属性的父级，或body/td/th/table对于隐藏元素/body/html值为nullelement.offsetWidth元素宽度尺寸，包括内边距与边框和滚动条element.offsetHeight元素高度尺寸，包括内边距与边框和滚动条element.offsetLeft相对于祖先元素的X轴坐标element.offsetTop相对于祖先元素的Y轴坐标element.clientWidth元素宽度，不包含边框，只包含内容和内边距，行元素尺寸为0element.clientHeight元素高度，不包含边框，只包含内容和内边距，行元素尺寸为0element.clientLeft内容距离外部的距离，滚动条在左侧时包括滚动条尺寸element.clientTop内容距离顶部的距离，滚动条在顶部时包括滚动条尺寸element.scrollWidth元素宽度，内容+内边距+内容溢出的尺寸element.scrollHeight元素高度，内容+内边距+内容溢出的尺寸element.scrollLeft水平滚动条左侧已经滚动的宽度element.scrollTop垂直滚动条顶部已经滚动的高度 getComputedStyle

为什么有时不能使用getComputedStyle

• 尺寸设置auto时获取结果不可用
• 由于滚动条的存在，不同浏览器返回结果不同
• 当元素没有设置CSS尺寸时，获取不到相应的尺寸内容

getBoundingClientRect

使用getBoundingClientRect获取元素相对于文档的几何坐标信息。

• 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width 的总和。
• 如果box-sizing: border-box，元素的的尺寸等于 width/height。

  * {
      padding: 0;
      margin: 0;
  }
  main {
      padding: 200px;
      position: relative;
  }
  #app {
      width: 200px;
      background: #e34334;
      margin: 100px;
      padding: 50px;
      border: 20px solid #efbc0f;
      color: white;
      text-align: center;
  }


  wgchen.blog.csdn.net


  let app = document.getElementById('app')
  let info = app.getBoundingClientRect()
  console.table(info)

计算结果的矩形尺寸包括外边距，不包括边框与内边距，上例计算结果如下

尺寸值x300y300width340height162.40000915527344top300right640bottom462.40000915527344left300 getClientRects

getClientRects用于返回多行元素所占的尺寸，下面示例将为每行返回所占的空间尺寸

  span {
    width: 200px;
    overflow: auto;
  }



网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。


  let span = document.querySelector('span')
  let info = span.getClientRects()
  console.log(info)

上例计算结果如下

(index)xywidthheighttoprightbottomleft值0881496.450073242187522.39999961853027381504.450073242187530.39999961853027381830.399999618530273436.225006103515622.39999961853027330.399999618530273444.225006103515652.799999237060558length2 坐标点元素

JS提供了方法获取指定坐标上的元素，如果指定坐标点在视口外，返回值为NULL

• 坐标都是从左上角计算，这与CSS中的 right / bottom 等不同
• 窗口坐标类似于position:fixed
• 文档坐标类似于position:absolute

方法说明element.elementsFromPoint返回指定坐标点所在的元素集合element.elementFromPoint返回指定坐标点最底层的元素 元素集合

返回指定坐标点上的元素集合

  div {
    width: 200px;
    height: 200px;
  }



  const info = document.elementsFromPoint(100, 100)
  console.log(info)

底层元素

返回坐标点上的底层的元素

  div {
    width: 200px;
    height: 200px;
  }



  const info = document.elementFromPoint(100, 100)
  console.log(info)

滚动控制

下面掌握文档或元素的滚动操作

方法列表 方法说明说明element.scrollLeft获取和设置元素X轴滚动位置element.scrollTop获取和设置元素Y轴滚动位置element.scrollBy()按偏移量进行滚动内容参数为对象，{top:垂直偏移量,left:水平偏移量,behavior:'滚动方式'}element.scroll() 或 element.scrollTo()滚动到指定的具体位置参数为对象，{top:X轴文档位置,left:Y轴文档位置,behavior:'滚动方式'}element.scrollIntoView(bool)定位到顶部或底部参数为true元素定位到顶部，为false定位到窗口底部 文档滚动位置

下例是查看文档滚动的 X/Y 坐标示例，请在控制台查看结果

    window.onscroll = function () {
        console.log(document.documentElement.scrollTop)
        console.log(document.documentElement.scrollLeft)
    }

也可以使用 window.pageXOffset 对象属性获取

    window.onscroll = function () {
        console.log(window.pageXOffset)
        console.log(window.pageYOffset)
    }

元素滚动位置

下面查看元素内容的滚动属性，请在控制台查看结果

• 要为元素设置 overflow:auto 以使其产生滚动条
• 使用 scroll 事件来监听结果

  


    const app = document.getElementById('app')
    app.addEventListener('scroll', function () {
        console.log(this.scrollLeft)
        console.log(this.scrollTop)
    })

控制滚动

下面介绍的是控制元素滚动的操作方法

使用 scrollBy 滚动文档

behavior:smooth 为平滑滚动

  body {
    height: 3000px;
  }



  setInterval(() => {
    document.documentElement.scrollBy({ top: 30, behavior: 'smooth' })
  }, 100)

使用 scroll 滚动到指定位置

behavior:smooth 为平滑滚动

  body {
    height: 3000px;
  }



  setTimeout(() => {
    document.documentElement.scroll({ top: 30, behavior: 'smooth' })
  }, 1000)

使用元素 scrollIntoView 方法实现滚动操作

参数可以是布尔值或对象

• 参数为 true 时顶部对齐，相当于{block: “start”}
• 参数为 false 时底部对齐，相当于{block: “end”}
• 也可定义 {behavior:‘smooth’} 来进行平滑滚动

  div {
      height: 2000px;
      background: red;
      border-top: solid 50px #efbc0f;
      border-bottom: solid 50px #1bb491;
      color: #fff;
  }
  span {
      border-radius: 50%;
      color: #fff;
      background: #000;
      width: 50px;
      height: 50px;
      display: block;
      text-align: center;
      line-height: 50px;
      position: fixed;
      top: 50%;
      right: 50px;
      border: solid 2px #ddd;
  }

wgchen.blog.csdn.net
TOP


  document.querySelector('span').addEventListener('click', () => {
      let app = document.querySelector('#app')
      app.scrollIntoView({ block: 'end', behavior: 'smooth' })
  })

回到顶部

下例是开发中常用的回到顶部示例

  * {
      padding: 0;
      margin: 0;
  }
  span {
      width: 50px;
      height: 50px;
      background-color: #e34334;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: fixed;
      right: 50px;
      bottom: 50px;
      border-radius: 10px;
      opacity: 0;
      transition: 1s;
      cursor: pointer;
  }
  span.show {
      opacity: 1;
      transform: rotate(360deg);
  }


 
	wgchen.blog.csdn.net@博客


TOP


    window.addEventListener('scroll', () => {
    		// 判断是否距离页面底部200px
        let state = document.documentElement.offsetHeight - 200  clientWidth - width) this.x = -1
            if (x  clientHeight - height) this.y = -1
            if (y