您的足迹:首页 > 我的代码 >JS-判断元素是否在可视窗口可见

JS-判断元素是否在可视窗口可见

elementIsVisibleInViewport 


如果指定的元素在可视窗口中可见,则返回 true ,否则返回 false 。

使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值来确定给定元素是否在可视窗口中可见。 省略第二个参数来判断元素是否完全可见,或者指定 true 来判断它是否部分可见。

JavaScript 代码:
    
  1. const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  2. const { top, left, bottom, right } = el.getBoundingClientRect();
  3. const { innerHeight, innerWidth } = window;
  4. return partiallyVisible
  5. ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
  6. ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
  7. : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
  8. };
JavaScript 代码:
    
  1. // e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
  2. elementIsVisibleInViewport(el); // false // (not fully visible)
  3. elementIsVisibleInViewport(el, true); // true // (partially visible)

主要用来辩别一些 隐藏的菜单(下拉子菜单)

本博客所有文章如无特别注明均为原创。作者:恶猫复制或转载请以超链接形式注明转自 恶猫的博客
原文地址《JS-判断元素是否在可视窗口可见

相关推荐

分享本文至:

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)

恶猫的博客 -记录自己日常,代码,美图,电影,音乐,新闻,只是个人博客而已

浙ICP备15011757号-4 网站地图 联系我