获取元素到页面可视区域底部的距离

思路分析

当前可视区域的高度 - （元素到文档顶部的距离 - 滚动条滚动的距离）- 元素自身的高度。

实现方法

使用JavaScript

const distanceToBottom = window.innerHeight - (dom.offsetTop - window.pageYOffset) - dom.offsetHeight;

注意：此方法不兼容IE。

使用jQuery

const distanceToBottom = $(window).height() - (dom.offset().top - $(document).scrollTop()) - dom.height();

使用Vue

const distanceToBottom = window.innerHeight - e.target.getBoundingClientRect().y - e.target.getBoundingClientRect().height;

JS事件向下穿透

给父元素绑定事件，点击到子元素时返回的 target 信息为子元素。可以使用 currentTarget 来获取绑定事件的元素（父元素）。

示例代码

<div @click="handleClick">
  <div class="child">子元素</div>
</div>

methods: {
  handleClick(e) {
    // e.currentTarget 是绑定事件的元素（父元素）
    // e.target 是实际触发事件的元素（可能是子元素）
    const parentElement = e.currentTarget;
    console.log('父元素:', parentElement);
    console.log('触发事件的元素:', e.target);
  }
}