我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
我找到的最简单的解决方案是交集观察者API:
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true)
console.log('Element has just become visible in screen');
}, { threshold: [0] });
observer.observe(document.querySelector("#main-container"));
其他回答
一个基于这个答案的例子,检查一个元素是否有75%可见(即小于25%的元素在屏幕之外)。
function isScrolledIntoView(el) {
// check for 75% visible
var percentVisible = 0.75;
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var elemHeight = el.getBoundingClientRect().height;
var overhang = elemHeight * (1 - percentVisible);
var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
return isVisible;
}
这是我的纯JavaScript解决方案,如果它隐藏在一个可滚动的容器。
演示在这里(尝试调整窗口的大小)
var visibleY = function(el){
var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height,
el = el.parentNode
// Check if bottom of the element is off the page
if (rect.bottom < 0) return false
// Check its within the document viewport
if (top > document.documentElement.clientHeight) return false
do {
rect = el.getBoundingClientRect()
if (top <= rect.bottom === false) return false
// Check if the element is out of view due to a container scrolling
if ((top + height) <= rect.top) return false
el = el.parentNode
} while (el != document.body)
return true
};
编辑2016-03-26:我已经更新了解决方案,以考虑滚动过去的元素,所以它隐藏在可滚动容器的顶部。 编辑2018-10-08:更新到当滚动到屏幕上方的视图外时处理。
我们可以在使用ES6的现代浏览器中做这样的事情:
const isFullySeen = el => el &&
typeof el.getBoundingClientRect === 'function' &&
el.getBoundingClientRect()['bottom'] + window.scrollY <=
window.innerHeight + window.scrollY &&
el.getBoundingClientRect()['top'] + window.scrollY <=
window.innerHeight + window.scrollY;
简单的检查元素(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);
如果你想在另一个div中滚动项目,
function isScrolledIntoView (elem, divID)
{
var docViewTop = $('#' + divID).scrollTop();
var docViewBottom = docViewTop + $('#' + divID).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}