javascript 在视口#viewport中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 在视口#viewport中相关的知识,希望对你有一定的参考价值。
//fully
const isInViewport = (el) => {
var rect = el.getBoundingClientRect();
return {
y: rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight),
x: rect.left >= 0 && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
}
}
//partial
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
);
}
以上是关于javascript 在视口#viewport中的主要内容,如果未能解决你的问题,请参考以下文章
移动web开发之视口viewport
移动web开发之视口viewport
移动前端中viewport(视口)
流式布局和viewport
浅谈移动端中的视口(viewport)
ViewPort视口