offsetTop获取元素到顶部的距离（累加）

思考：为什么要累加？

　　因为offsetTop返回的是当前对象距离上一层父级节点的距离；

　　如果元素有多个父级，则必须要累加

　　请参考：JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）

 

解决办法：

js: 亲测有效

getElementTop (el) {
          let actualTop = el.offsetTop
          let current = el.offsetParent
          while (current !== null) {
            actualTop += current.offsetTop
            current = current.offsetParent
          }
          return actualTop
        }

 

应用实例：

解决移动端键盘被遮挡的问题：ps这里键盘是手写的，所以不能启动原生键盘的focus事件，只能手动去修改scrollTop高度，来解决接盘被遮挡

html:

<div class="carNo-block" ref="carnoBlock">
   <h2>车辆信息<em class="icon_add" @click="addCarNo"></em> 
   </h2>
   <div class="multiCar" ref="multiCar">
       <!--这里ref渲染出了多个，获取的时候需要添加index索引-->
       <ul ref="carNo" class="carNo" v-for="(item, index) in 
       carform"  
       :key="index" @click.stop="getCarNoIndex(index)">
          .......
          <!--键盘组件-->
          <plate ref="plate" :initialPlate="item.carNo"     
               @plateConfirm="plateConfirm" 
               @emitKeyboard="emitKeyboard(index)" 
               @closeKeyBoard="closeKeyBoard" 
               :disabled="item.disabled">
         </plate>
      </ul>
   </div>
</div>

 

js:

data () {
  return: {
     scroll1: 0
   }  
},
mounted() {
        this.$nextTick(()=>{ // 监听页面滚动元素.recordContent的滚动高度
        // console.log("scroll1",document.querySelector('.recordContent').offsetHeight)
        this.box = document.querySelector('.recordContent')
        this.box.addEventListener('scroll', function(){
          // console.log('监听滚动事件----')
          this.scroll1 = 
        document.querySelector('.recordContent').scrollTop
          console.log("scroll1", this.scroll1)
        }, false)
      })
},
destroyed() { // 组件销毁时，结束监听
        this.box.removeEventListener('scroll',() => {
          this.scroll1 =     
        document.querySelector('.recordContent').scrollTop
        },false);
    },

methods: {
     getElementTop (el) {
          let actualTop = el.offsetTop
          let current = el.offsetParent
          while (current !== null) {
            actualTop += current.offsetTop
            current = current.offsetParent
          }
          return actualTop
        },
     emitKeyboard (index) {
           let offsetTop = this.getElementTop(this.$refs.carNo[index])
            let offsetHeight = this.box.offsetHeight
            let bottom = offsetHeight - (offsetTop - this.scroll1)
            console.log(bottom, offsetHeight, offsetTop, this.scroll1)
           this.$nextTick(()=>{
              let keyBoardHeight = 240 // document.querySelector('.keyboard-cell').offsetHeight
              if (bottom > keyBoardHeight) {
                this.scrollHeight = parseInt(this.scroll1 + 50)
              } else {
                this.scrollHeight = parseInt(this.scroll1 + (keyBoardHeight - bottom) + 50)
              }
              // if( this.scrollHeight < 0){
                  this.scroll2 = this.box.scrollTop
                  this.box.scrollTop =  this.scrollHeight
                  // console.log('this.scroll1', this.scroll2)
              // }
            })
    },
   closeKeyBoard () {
          this.box.scrollTop =  this.scroll2
        },
}