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

最新推荐文章于 2025-02-10 23:57:04 发布

wen_文文

最新推荐文章于 2025-02-10 23:57:04 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/zhangwen809877665/article/details/118554398

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两个关键的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: 获取可视窗口的宽度/高度（不包含工具条与滚动条）