zqy233的前端学习笔记

主题

回到顶部
索引

getBoundingClientRect

getBoundingClientRect用于获取某个元素相对于视窗的位置，这个方法没有参数，返回一个对象

具有以下属性，值全部为number类型

  • bottom：元素底部至视图顶部的距离
  • height: 元素高度
  • top：元素顶部至视图顶部的距离
  • right：元素右侧至视窗左侧的距离
  • left：元素左侧至视窗左侧的距离
  • width： 元素宽度
  • x： 距离视图左侧距离
  • y： 距离视图顶部距离
js
const offset = document.querySelectorAll(".card")[2].getBoundingClientRect()
console.log(offset)
//  bottom: 2417.0125732421875
//  height: 1026.5625
//  left: 181.1999969482422
//  right: 897.2375335693359
//  top: 1390.4500732421875
//  width: 716.0375366210938
//  x: 181.1999969482422
//  y: 1390.4500732421875

const offset = document.querySelectorAll(".card")[2].getBoundingClientRect()
console.log(offset)
//  bottom: 2417.0125732421875
//  height: 1026.5625
//  left: 181.1999969482422
//  right: 897.2375335693359
//  top: 1390.4500732421875
//  width: 716.0375366210938
//  x: 181.1999969482422
//  y: 1390.4500732421875

高度属性大全

  • element.getBoundingClientRect().top 元素顶部至视图顶部的距离
  • offsetParent：该属性返回一个对象的引用，这个对象是距离调用 offsetParent 的元素最近的（在包含层次中最靠近的），已进行过 CSS 定位的容器元素。 如果这个容器元素未进行 CSS 定位, 则 offsetParent 属性的取值为 body 元素的引用。 当容器元素的 style.display 被设置为 "none"时（译注：IE 和 Opera 除外），offsetParent 属性 返回 null
  • clientTop：元素上边框的厚度，当没有指定边框厚底时，一般为 0
  • scrollTop：位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度。
  • offsetTop：获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。
  • clientHeight：内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
  • scrollHeight：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
  • offsetHeight：获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。offsetHeight 在新版本的 FF 和 IE 中是一样的，表示网页的高度，与滚动条无关，chrome 中不包括滚动条

获取 event

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="click(event)">点击</button>
    <input onkeypress="keypress(event)" />
    <script>
      function click(e) {
        console.log(e)
      }
      function keypress(e) {
        console.log(e)
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="click(event)">点击</button>
    <input onkeypress="keypress(event)" />
    <script>
      function click(e) {
        console.log(e)
      }
      function keypress(e) {
        console.log(e)
      }
    </script>
  </body>
</html>

判断鼠标滚轮向上向下滚动

js
window.onwheel = e => {
    console.log(e)
    if (e.wheelDelta > 0) {
      console.log("向上滚动")
    } else {
      console.log("向下滚动")
    }
  }

window.onwheel = e => {
    console.log(e)
    if (e.wheelDelta > 0) {
      console.log("向上滚动")
    } else {
      console.log("向下滚动")
    }
  }

判断页面向上还是向下滚动

js
 let currentTop = 0
  window.onscroll = () => {
    // 向下滚动了
    if (currentTop < document.documentElement.scrollTop) {
      store.commit("showHeader", false)
    } else {
      // 向上滚动
      store.commit("showHeader", true)
    }
    currentTop = document.documentElement.scrollTop
  }
})

 let currentTop = 0
  window.onscroll = () => {
    // 向下滚动了
    if (currentTop < document.documentElement.scrollTop) {
      store.commit("showHeader", false)
    } else {
      // 向上滚动
      store.commit("showHeader", true)
    }
    currentTop = document.documentElement.scrollTop
  }
})

判断元素是否进入可视区域

js
 const offset = document.querySelectorAll(".card")[2].getBoundingClientRect()
    const offsetTop = offset.top
    const offsetBottom = offset.bottom
    const offsetHeight = offset.height
    // window.innerHeight表示可视区域的高度
    // offsetTop表示距离顶部高度，offsetBottom表示距离底部高度
    console.log(offsetTop, offsetBottom, window.innerHeight)
    if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
      console.log("进入可视区域")
      // do something...
    } else {
      console.log("移出可视区域")
      // do something...
    }

 const offset = document.querySelectorAll(".card")[2].getBoundingClientRect()
    const offsetTop = offset.top
    const offsetBottom = offset.bottom
    const offsetHeight = offset.height
    // window.innerHeight表示可视区域的高度
    // offsetTop表示距离顶部高度，offsetBottom表示距离底部高度
    console.log(offsetTop, offsetBottom, window.innerHeight)
    if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
      console.log("进入可视区域")
      // do something...
    } else {
      console.log("移出可视区域")
      // do something...
    }

document.documentElement

  • document.documentElement.scrollHeight 总高度，距离顶部的滚动距离+可视范围的高度
  • document.documentElement.scrollTop 距离顶部的滚动距离
  • document.documentElement.clientHeight 可视范围的高度

滚动至元素

获取元素的offsetTop，使用scrollTo滚动至，smooth代表平滑滚动

js
 document.documentElement.scrollTo({
    top: document.querySelectorAll<HTMLElement>(".card")[index].offsetTop - 44,
    behavior: "smooth"
  })

 document.documentElement.scrollTo({
    top: document.querySelectorAll<HTMLElement>(".card")[index].offsetTop - 44,
    behavior: "smooth"
  })

使用元素自身的scrollIntoView方法直接滚动至

js
 document.querySelectorAll<HTMLElement>(".card")[index].scrollIntoView({ behavior: "smooth" })

 document.querySelectorAll<HTMLElement>(".card")[index].scrollIntoView({ behavior: "smooth" })

是否滚动底部

js
 if (document.documentElement.scrollTop > document.documentElement.scrollHeight - document.documentElement.clientHeight) {
      console.log("滚动至底部")
    }

 if (document.documentElement.scrollTop > document.documentElement.scrollHeight - document.documentElement.clientHeight) {
      console.log("滚动至底部")
    }

滚动底部

js
function scrollToBottom() {
    document.documentElement.scrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight
}
// 平滑滚动顶部
function scrollToBottom() {
  document.documentElement.scrollTo({
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
  })
}

function scrollToBottom() {
    document.documentElement.scrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight
}
// 平滑滚动顶部
function scrollToBottom() {
  document.documentElement.scrollTo({
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
  })
}

滚动顶部

js
// 顶部
function scrollToTop() {
    document.documentElement.scrollTop = 0
}
// 平滑滚动顶部
function scrollToTop() {
  document.documentElement.scrollTo({
  top: 0,
  behavior: 'smooth'
  })
}

// 顶部
function scrollToTop() {
    document.documentElement.scrollTop = 0
}
// 平滑滚动顶部
function scrollToTop() {
  document.documentElement.scrollTo({
  top: 0,
  behavior: 'smooth'
  })
}

兼容滚动插件

sh
npm i -s smoothscroll-polyfill

npm i -s smoothscroll-polyfill
js
import smoothscroll from 'smoothscroll-polyfill'
mounted(){
  smoothscroll.polyfill()
}

import smoothscroll from 'smoothscroll-polyfill'
mounted(){
  smoothscroll.polyfill()
}

Released under the MIT License.

Copyright © 2022.4-2024.7