我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
制作了一个简单的插件,用于检测元素在可滚动容器中是否可见
$.fn.isVisible = function(){
var win;
if(!arguments[0])
{
console.error('Specify a target;');
return false;
}
else
{
win = $(arguments[0]);
}
var viewport = {};
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
viewport.bottom = win.height() + win.offset().top;
return (!( bounds.top > viewport.bottom) && (win.offset().top < bounds.bottom));
};
像这样调用$('elem_to_check').isVisible('scrollable_container');
希望能有所帮助。
其他回答
在毫无成效地跑来跑去并使用了几个不工作的代码之后。这就是我使用Jquery实现垂直滚动可视性的方法。 将'#footerplace'替换为您想垂直跟踪的元素。
jQuery.expr.filters.offscreen = function(el) {
var rect = el.getBoundingClientRect();
console.log(rect)
console.log('window height', $(window).height());
return (
(rect.top <= $(window).height()) && (rect.bottom <= $(window).height())
);
};
$(document).scroll(function(){
if ($('#footerplace').is(':offscreen')){
console.log('this is true');
$('#footerplace').is(':offscreen');
} else {
console.log('this is false');
$('#footerplace').is(':offscreen');
}
我在我的应用程序中有这样一个方法,但它不使用jQuery:
/* Get the TOP position of a given element. */
function getPositionTop(element){
var offset = 0;
while(element) {
offset += element["offsetTop"];
element = element.offsetParent;
}
return offset;
}
/* Is a given element is visible or not? */
function isElementVisible(eltId) {
var elt = document.getElementById(eltId);
if (!elt) {
// Element not found.
return false;
}
// Get the top and bottom position of the given element.
var posTop = getPositionTop(elt);
var posBottom = posTop + elt.offsetHeight;
// Get the top and bottom position of the *visible* part of the window.
var visibleTop = document.body.scrollTop;
var visibleBottom = visibleTop + document.documentElement.offsetHeight;
return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}
编辑:此方法适用于I.E.(至少版本6)。请阅读评论以了解FF的兼容性。
如何
function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
之后,一旦元素出现在视图中,你就可以触发你想要的任何东西
$(window).scroll(function(){
if (isInView($('.classOfDivToCheck')))
//fire whatever you what
dothis();
})
这对我来说很好
如果元素的任何部分在页面上可见,此方法将返回true。这种方法在我身上效果更好,也可能对其他人有所帮助。
function isOnScreen(element) {
var elementOffsetTop = element.offset().top;
var elementHeight = element.height();
var screenScrollTop = $(window).scrollTop();
var screenHeight = $(window).height();
var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;
return scrollIsAboveElement && elementIsVisibleOnScreen;
}
推特斯科特道丁的酷功能为我的要求- 这是用来查找元素是否刚刚滚动到屏幕上,即它的上边缘。
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}