我通过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');
希望能有所帮助。
其他回答
简单修改可滚动的div(容器)
var isScrolledIntoView = function(elem, container) {
var containerHeight = $(container).height();
var elemTop = $(elem).position().top;
var elemBottom = elemTop + $(elem).height();
return (elemBottom > 0 && elemTop < containerHeight);
}
注意:如果元素大于可滚动的div,则此方法无效。
这里的大多数答案都没有考虑到一个元素也可以被隐藏,因为它被滚动出div的视图,而不仅仅是整个页面。
为了排除这种可能性,基本上必须检查元素是否位于其每个父元素的边界内。
这个解决方案正是这样做的:
function(element, percentX, percentY){
var tolerance = 0.01; //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
if(percentX == null){
percentX = 100;
}
if(percentY == null){
percentY = 100;
}
var elementRect = element.getBoundingClientRect();
var parentRects = [];
while(element.parentElement != null){
parentRects.push(element.parentElement.getBoundingClientRect());
element = element.parentElement;
}
var visibleInAllParents = parentRects.every(function(parentRect){
var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
var visiblePercentageX = visiblePixelX / elementRect.width * 100;
var visiblePercentageY = visiblePixelY / elementRect.height * 100;
return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
});
return visibleInAllParents;
};
它还允许您指定在每个方向上必须可见的百分比。 它不包括由于其他因素(如display: hidden)而隐藏的可能性。
这应该适用于所有主流浏览器,因为它只使用getBoundingClientRect。我个人在Chrome和Internet Explorer 11上测试了它。
其他答案通常不检查元素是否在视图中沿着X轴,即可能在当前视口Y范围内,但不在X范围内。这个函数检查X和Y是否显示在视口中:
function checkElInView(el) {
if (!el || !typeof el.getBoundingClientRect === "function") return false;
const r = el.getBoundingClientRect();
const vw = document.documentElement.clientWidth;
const vh = document.documentElement.clientHeight;
const inViewX = (r.left > 0 && r.left < vw) || (r.right < vw && r.right > 0);
const inViewY = (r.top > 0 && r.top < vh) || (r.bottom < vh && r.bottom > 0);
return inViewX && inViewY;
}
简单的检查元素(el)是否在可滚动的div (holder)中可见
function isElementVisible (el, holder) {
holder = holder || document.body
const { top, bottom, height } = el.getBoundingClientRect()
const holderRect = holder.getBoundingClientRect()
return top <= holderRect.top
? holderRect.top - top <= height
: bottom - holderRect.bottom <= height
}
使用jQuery:
var el = $('tr:last').get(0);
var holder = $('table').get(0);
var isVisible = isElementVisible(el, holder);
Javascript代码可以写成:
窗口。addEventListener('scroll', function() { var element = document.querySelector('#main-container'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } });
在react js中写为:
componentDidMount () { 窗口。addEventListener(“滚动”,this.isScrolledIntoView); } componentWillUnmount () { 窗口。removeEventListener(“滚动”,this.isScrolledIntoView); } isScrolledIntoView () { var element = document.querySelector('.element'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } }