我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
这个问题有超过30个答案，没有一个使用我一直在使用的令人惊讶的简单的纯JS解决方案。没有必要仅仅为了解决这个问题而加载jQuery，因为许多人都在推动这个问题。
为了判断元素是否在视口中，我们必须首先确定元素在主体中的位置。我们不需要像我以前想的那样递归地做这个。相反，我们可以使用element.getBoundingClientRect()。
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
这个值是物体顶部和主体顶部之间的Y差。
然后我们必须判断元素是否在视图中。大多数实现都会询问完整的元素是否在视口中，所以这就是我们将要讨论的内容。
首先，窗口的顶部位置是:window. scrolly。
我们可以通过将窗口的高度加到窗口的顶部位置来获得窗口的底部位置:
var window_bottom_position = window.scrollY + window.innerHeight;
让我们创建一个简单的函数来获取元素的顶部位置:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
这个函数将返回元素在窗口中的顶部位置，或者如果你通过. getboundingclientrect()方法传递给它的不是元素，它将返回0。这个方法已经存在很长时间了，所以您不必担心浏览器不支持它。
现在，元素的顶部位置是:
var element_top_position = getElementWindowTop(element);
And或元素的底部位置为:
var element_bottom_position = element_top_position + element.clientHeight;
现在我们可以通过检查元素的底部位置是否低于viewport的顶部位置，以及检查元素的顶部位置是否高于viewport的底部位置来确定元素是否在viewport中:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
从那里，您可以执行逻辑来在元素上添加或删除视图内类，然后您可以稍后在CSS中使用过渡效果处理该类。
我非常惊讶，我没有在其他地方找到这个解决方案，但我相信这是最干净和最有效的解决方案，而且它不需要您加载jQuery!
其他回答
我只是想分享一下，我把这个和我的脚本结合起来移动div，这样它就总是在视图中:
$("#accordion").on('click', '.subLink', function(){
var url = $(this).attr('src');
updateFrame(url);
scrollIntoView();
});
$(window).scroll(function(){
changePos();
});
function scrollIntoView()
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#divPos").offset().top;
var elemBottom = elemTop + $("#divPos").height();
if (elemTop < docViewTop){
$("#divPos").offset({top:docViewTop});
}
}
function changePos(){
var scrTop = $(window).scrollTop();
var frmHeight = $("#divPos").height()
if ((scrTop < 200) || (frmHeight > 800)){
$("#divPos").attr("style","position:absolute;");
}else{
$("#divPos").attr("style","position:fixed;top:5px;");
}
}
jQuery有一个名为inview的插件，它添加了一个新的inview事件。
下面是jQuery插件不使用事件的代码:
$.extend($.expr[':'],{
inView: function(a) {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(a).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(a).height() + ot) < (st + wh);
}
});
(function( $ ) {
$.fn.inView = function() {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(this).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(this).height() + ot) < (st + wh);
};
})( jQuery );
我在一个叫James的家伙的评论中发现了这一点(http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
在毫无成效地跑来跑去并使用了几个不工作的代码之后。这就是我使用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');
}
这个问题有超过30个答案，没有一个使用我一直在使用的令人惊讶的简单的纯JS解决方案。没有必要仅仅为了解决这个问题而加载jQuery，因为许多人都在推动这个问题。
为了判断元素是否在视口中，我们必须首先确定元素在主体中的位置。我们不需要像我以前想的那样递归地做这个。相反，我们可以使用element.getBoundingClientRect()。
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
这个值是物体顶部和主体顶部之间的Y差。
然后我们必须判断元素是否在视图中。大多数实现都会询问完整的元素是否在视口中，所以这就是我们将要讨论的内容。
首先，窗口的顶部位置是:window. scrolly。
我们可以通过将窗口的高度加到窗口的顶部位置来获得窗口的底部位置:
var window_bottom_position = window.scrollY + window.innerHeight;
让我们创建一个简单的函数来获取元素的顶部位置:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
这个函数将返回元素在窗口中的顶部位置，或者如果你通过. getboundingclientrect()方法传递给它的不是元素，它将返回0。这个方法已经存在很长时间了，所以您不必担心浏览器不支持它。
现在，元素的顶部位置是:
var element_top_position = getElementWindowTop(element);
And或元素的底部位置为:
var element_bottom_position = element_top_position + element.clientHeight;
现在我们可以通过检查元素的底部位置是否低于viewport的顶部位置，以及检查元素的顶部位置是否高于viewport的底部位置来确定元素是否在viewport中:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
从那里，您可以执行逻辑来在元素上添加或删除视图内类，然后您可以稍后在CSS中使用过渡效果处理该类。
我非常惊讶，我没有在其他地方找到这个解决方案，但我相信这是最干净和最有效的解决方案，而且它不需要您加载jQuery!
当你滚动时，你可以使用jquery插件“onScreen”来检查元素是否在当前视口中。 当选择器出现在屏幕上时，插件将选择器的":onScreen"设置为true。 这是插件的链接，你可以把它包含在你的项目中。 “http://benpickles.github.io/onScreen/jquery.onscreen.min.js”
你可以试试下面这个适合我的例子。
$(document).scroll(function() {
if($("#div2").is(':onScreen')) {
console.log("Element appeared on Screen");
//do all your stuffs here when element is visible.
}
else {
console.log("Element not on Screen");
//do all your stuffs here when element is not visible.
}
});
HTML代码:
<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>
CSS:
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
