我想知道是否有人对此有简单的解决方案。我正在尝试检测 HTML
元素的任何部分是否在视口(viewport)之外。我试过使用以下代码:
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
由 Steven 提供给您
只有当整个元素不再可见时,我才能让它工作,但我只需要知道元素的一部分是否在视口(viewport)之外。
当元素在视口(viewport)之外时,我会在其上放置一个不同的类,这样它就会向左移动,以便再次可见。
类似于:
if(elementIsPartiallyOutsideViewport) {
ele.addClass('move-left');
}
有什么想法吗?
最佳答案
大多数浏览器已经支持getBoundingClientRect()
方法。所以你可以试试下面的代码。
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
如果元素不在视口(viewport)内,您只需将元素传递给函数并得到 false
。
用法。
if (!isElementInViewport(el)) {
el.addClass('move-left');
}
编辑
补充一下。您可以在 here 中获得有关 getBoundingClientRect()
函数和浏览器支持的更多信息。
关于javascript - 如何检测 DOM 元素是否部分超出视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21688590/