页面滚动时判断元素是否在可视区域内

本文介绍了两个关键的JavaScript技术:一是用于检测Vue组件元素是否在浏览器可视区域内的函数,通过计算元素相对于页面的位置和窗口视口的大小来判断;二是实现函数节流的函数,确保在设定的时间间隔内只执行一次,避免频繁调用导致的性能问题。这两个技术在优化网页性能和用户体验中起着重要作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * @description: 判断dom元素是否在可视区域内
 * @param: el: Vuecomponnet对象
 * @returns: true-在可视区域,false: 不在可视区域
 */
export const isElementInViewport = function(el) {
  let s = el.$el.offsetTop    // 元素相对于页面顶部的距离
  let x = el.$el.offsetHeight    //元素自身高度   
  let t = window.pageYOffset  // 页面在垂直方向上滚动的距离
  let y = window.innerHeight   //窗口可视区域的高度
  let isHidden = (s+x) < t || (s > (t+y))
  return !isHidden
};



/**
 * @description: 函数节流,即一定时间内,函数只能执行一次
 * @param: fn:要执行的函数
 * @param:wait:要间隔的时间差,(单位:毫秒)
 */
export const throttle = function (fn, wait:number=500) {
  let timer:any = null; // 定时器
  let firstTime:Boolean = true;
  return function () {
    let args = Array.prototype.slice.call(arguments, 0);
    // 如果是第一次执行的话,需要立即执行该函数
    if (firstTime) {
      fn(args);
      firstTime = false;
    }
    // 如果当前有正在等待执行的函数则直接返回
    if (timer) return;
    // 开启一个倒计时定时器
    timer = setTimeout(function () {
      fn(args);
      // 清除之前的定时器
      timer = null;
    }, wait);
  };
}

ele.offsetTop / offsetLeft:当前对象到其上级层顶部的距离.

ele.offsetWidth / offsetHeight: 返回元素自身的 宽度 / 高度,即标准盒子模型下:height + padding + border

window.pageXOffset / window.pageYOffset: 返回文档相对于窗口左上角水平和垂直方向滚动的像素。相等于scrollX / scrollY;

window.innerWidth / window.innerHeight: 获取可视窗口的宽度/高度(不包含工具条与滚动条)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen_文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值