ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何判断一个元素是否在可视区域内

2021-04-17 23:05:16  阅读:188  来源: 互联网

标签:判断 滚动 可视 元素 window let card 页面


以使用 JQuery 实现为参考

目标元素:#card

let $card = $('#card');

当页面滚动时,元素随页面滚动,该元素距离顶部的距离

let cardOffsetTop = $("#card").offset().top;

获取 card 的高度(card 包含外边距)

let cardOuterHeight = $("#card").outerHeight(true); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距, 否则不含有. 具体视需求而定.

获取页面滚动的距离

let winScrollHeight = $(window).scrollTop();

浏览器可见区域的高度:

let winHeight = $(window).height();

那应该如何确定元素在可见区域内呢?

实现代码:

if(!(winScrollTop > cardOffsetTop+ cardOuterHeight) && !(winScrollTop < cardOffsetTop - winHeight)) {
    console.log("在可视区域出现")
	  //既不在 card 下面,也不在 card上面
} else {
    console.log("在可视区域消失")
}

标签:判断,滚动,可视,元素,window,let,card,页面
来源: https://blog.51cto.com/u_15166492/2714367

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有