滚动元素相对滚动框的位置

<script>
export default {
  data() {
    return {
      eleIndex: 10,
      windowHeight: 0,
      scrollHeight: 0,
    };
  },
  mounted() {
    // 监听页面滚动
    this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    window.onscroll = () => {
      const obj = this.GetRect(`#hideMusicVar${this.eleIndex}`);
      if (obj.bottom <= 0 || obj.top >= this.windowHeight) {
        // console.log('window: 在视口之上 || 在视口之下');
        this.pauseAudio();
      }
    };
    // 监听区域滚动
    this.scrollHeight = $('#letterList').offset().height;
    document.querySelector('#letterList').onscroll = () => {
      const scrollTop = $('#letterList').scrollTop();
      const obj = this.GetEleRect(`#hideMusicVar${this.eleIndex}`);
      if (obj.bottom <= scrollTop || obj.top >= scrollTop + this.scrollHeight) {
        // console.log('element: 在视口之上 || 在视口之下');
        this.pauseAudio();
      }
    };
  },
  methods: {
    // 获取元素上下左右距离视口的距离
    GetRect(ele) {
      ele = document.querySelector(ele);
      const rect = ele.getBoundingClientRect(); // 距离视窗的距离
      const top = document.documentElement.clientTop ? document.documentElement.clientTop : 0; // html元素对象的上边框的宽度
      const left = document.documentElement.clientLeft ? document.documentElement.clientLeft : 0;
      return {
        top: rect.top - top,
        bottom: rect.bottom - top,
        left: rect.left - left,
        right: rect.right - left
      };
    },
    // 获取元素上下左右距离滚动区域的距离
    GetEleRect(ele) {
      const eleTop = $(ele).position().top;
      const eleHeight = $(ele).offset().height;
      const eleLeft = $(ele).position().left;
      const eleWidth = $(ele).offset().width;
      return {
        top: eleTop,
        bottom: eleTop + eleHeight,
        left: eleLeft,
        right: eleLeft + eleWidth,
      };
    },
  },
};
</script>