栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何判断DOM元素在当前视口中是否可见?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何判断DOM元素在当前视口中是否可见?

更新: 时间在前进,我们的浏览器也在前进。 不再推荐 使用 此技术, 如果不需要支持7之前的Internet
Explorer版本,则应使用Dan的解决方案。

原始解决方案(现已过时):

这将检查该元素在当前视口中是否完全可见:

function elementInViewport(el) {  var top = el.offsetTop;  var left = el.offsetLeft;  var width = el.offsetWidth;  var height = el.offsetHeight;  while(el.offsetParent) {    el = el.offsetParent;    top += el.offsetTop;    left += el.offsetLeft;  }  return (    top >= window.pageYOffset &&    left >= window.pageXOffset &&    (top + height) <= (window.pageYOffset + window.innerHeight) &&    (left + width) <= (window.pageXOffset + window.innerWidth)  );}

您可以简单地对其进行修改,以确定元素的任何部分在视口中是否可见:

function elementInViewport2(el) {  var top = el.offsetTop;  var left = el.offsetLeft;  var width = el.offsetWidth;  var height = el.offsetHeight;  while(el.offsetParent) {    el = el.offsetParent;    top += el.offsetTop;    left += el.offsetLeft;  }  return (    top < (window.pageYOffset + window.innerHeight) &&    left < (window.pageXOffset + window.innerWidth) &&    (top + height) > window.pageYOffset &&    (left + width) > window.pageXOffset  );}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/411427.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号