zoukankan      html  css  js  c++  java
  • 前端实现表格基于游览器固定显示

    序号 内容 是否明白 备注
    1. 表格表头固定 time:2018/3/12
    1.表格表头固定
    `思路:定义span标签,获取到body的高减去元素距离内容顶部的高,然后获取到的值就是所要定义给表格的高度`
    1. 定义span标签 <span id="tablePrev" />
    2.
    ==封装到元素到浏览器窗口的偏移量1==
    `思路很简单,就是把元素本身的偏移量跟所有上级定位元素的偏移量都加起来就可以了`
    function offset(obj,direction){
    		//将top,left首字母大写,并拼接成offsetTop,offsetLeft
    		var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);
    		
    		var realNum = obj[offsetDir];
    		var positionParent = obj.offsetParent;  //获取上一级定位元素对象
    		
    		while(positionParent != null){
    			realNum += 	positionParent[offsetDir];
    			positionParent = positionParent.offsetParent;
    		}
    		return realNum;
    	}
    	console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top'));
    --------------------- 
    原文:https://blog.csdn.net/w390058785/article/details/80461845 
    
    ==封装到元素到浏览器窗口的偏移量2==
    `获取元素距离窗口左边,上边的距离`
    function offset(ele) {
        const pos = {
            left: 0,
            top: 0
        };
        while (ele) {
            pos.left += ele.offsetLeft;
            pos.top += ele.offsetTop;
            ele = ele.offsetParent;
        }
        return pos;
    }
    
    getLeftTop() {
        const tablePrevOffset = offset(document.getElementById(`tablePrev`));
        `获取body的高`
        const clientH = document.body.clientHeight;
        const maxH = clientH - tablePrevOffset.top - 24;
        this.tableMaxH = maxH;
    },
    
    `所涉及的内容知识`
    JavaScript toUpperCase()方法用于把字符串转换为大写
    JavaScript substring() 方法用于提取字符串中介于两个指定下标之间的字符
    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小)
    scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度)
    offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距
    
    

    (此是原创) 转载请标注原文链接,谢谢。。。

  • 相关阅读:
    vue学习 基本简介,安装,示例,options
    python操作谷歌翻译
    Celery笔记
    nps内网穿透笔记
    初学django基础05 路由系统,django的请求与返回
    初学Django基础04 http|jsonresponse,filter模板过滤器,cvb与fvb
    计数二进制字符串
    字符串相加
    类与对象
    Arrays
  • 原文地址:https://www.cnblogs.com/JinXinYuan/p/10521543.html
Copyright © 2011-2022 走看看