getBoundingClientRect使用场景(table固定表头)

  • getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,是DOM元素到浏览器可视范围的距离(不包含文档scroll的部分)。
  • 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height

javascript 复制代码
<div id="box"></div>
var object=document.getElementById('box');  
rectObject = object.getBoundingClientRect();
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
rectObject.width:是元素自身的宽 (包括滚动条)
rectObject.height是元素自身的高 (包括滚动条)

使用场景:在使用框架进行开发是,经常会遇到需要给table固定表头的需求,这时候需要给table设置一个固定的高度,可以使用添加一个元素通过getBoundingClientRect计算top的距离,然后获取浏览器可视范围高度,进行计算

下面以VUE为例,分装通用组件

javascript 复制代码
<template>
  <div ref="warp_body" class="warp-body" :style="warpStyle">
    <slot :height="height" />
  </div>
</template>
<script>
/*
  * @doc 自动获取元素剩下的高度, 在列表中科院很好的使用
  * @props { padding: Number } 底下的高度
   <AutofixHeight :padding="100">
     <template slot-scope="{height}">
      <Table :height="height" />
    </template>
   </AutofixHeight>
  * */
export default {
  name: 'AutofixHeight',
  props: {
    padding: {
      type: Number,
      default: 78
    }
  },
  data() {
    return {
      warpStyle: {
        height: '200px'
      },
      height: 0
    }
  },
  mounted() {
    this.initHeight()
    window.addEventListener('resize', this.initHeight)
  },
  methods: {
    initHeight() {
      // 初始化获取组件当前所在的位置
      this.$nextTick(() => {
        setTimeout(() => {
          //表格高度 = 浏览器可视范围高度 - 距离顶部高度 - 其它高度
          const hdiff = document.body.clientHeight - this.$refs.warp_body.getBoundingClientRect().top - this.padding
          this.height = hdiff
          this.warpStyle = {
            height: hdiff + 'px'
          }
        }, 200)
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.initHeight)
  }
}
</script>

<style scoped>
.warp-body {
  width: 100%;
}
</style>
相关推荐
Olrookie5 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6451 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
ftpeak1 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
莫的感情2 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥2 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python2 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_2 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐2 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊2 小时前
C语言bsearch的使用
java·c语言·前端