zoukankan      html  css  js  c++  java
  • js获取元素距离顶部的高度

      mounted() {
        let that = this;
        // this.dom = this.$refs.multipleTable.bodyWrapper;
        // this.dom.addEventListener("scroll", () => {
        //   this.$nextTick(() => {
        //   });
        // });
    
        document.onkeydown = function (e) {
          if (e.code == "Tab" && that.$refs.multipleTable) {
            that.scrollTabSure = true;
            setTimeout(() => {
              that.scrollTabSure = false;
            }, 300);
          }
        };
      },
      methods: {
        setScrollTopStart() {
          let topObj = {};
          for (let i = 0; i < this.tableData.length; i++) {
            let elIdNew = document.getElementById("scoreInput" + i);
            if (elIdNew) {
              console.log(elIdNew);
              topObj[`scoreInput${i}`] = elIdNew.getBoundingClientRect().top;
            }
          }
          this.topObj = topObj;
          console.log(topObj);
        },
        getNowElFn(index) {
          const elId = document.getElementById("scoreInput" + index);
          let topNum = Number(elId.getBoundingClientRect().top);
          let endNum = this.topObj[`scoreInput${index}`] - 826;
          console.log(endNum);
          if (!this.scrollTabSure) {
            return;
          }
          this.scrollTabSure = false;
    
          // const dom = this.$refs[`scoreInput${index}`].$el;
          // console.log(this.$refs[`scoreInput${index}`]);
          // console.log(dom.offsetHeight, "offsetHeight");
          // console.log(dom.offsetWidth, "offsetWidth");
          // console.log(dom.offsetLeft, "offsetLeft");
          // console.log(dom.offsetTop, "offsetTop");
          // console.log(dom.scrollTop, "scrollTop");
    
          if (endNum > 0) {
            this.saveScroll(endNum);
          } else {
            this.saveScroll(0);
          }
        },
        saveScroll(endNum) {
          this.$nextTick(() => {
            setTimeout(() => {
              var scrollTop = this.$el.querySelector(".el-table__body-wrapper");
              scrollTop.scrollTop = endNum;
            }, 13);
          });
        },
  • 相关阅读:
    Section 3.1 Shaping Regions
    3D@OpenSource
    查找资料
    Section 3.1 Shaping Regions Again
    USACO Contact IOI’98 TLE
    事项ON丰宁坝上草原
    四叉树@POJ1610 Quad Trees
    在TabCtrl上放View@MFC
    CUGB的一场周赛
    贴图程序进展
  • 原文地址:https://www.cnblogs.com/dianzan/p/14392930.html
Copyright © 2011-2022 走看看