我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
我添加了我的代码修改。不幸的是,我可以看到每个人都在他们的版本,每个人都忽略了debance功能的使用。哪个答案是让你的事件不触发,例如,在滚动时每秒200次。
$(window).scroll(function(){
if (isInView($('.class'))){
debounce(
someFunction(), 5
)
}
});
function isInView(elem){
if(document.documentElement.clientWidth > 991){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}else {
doSometing;
}
}
其他回答
jQuery Waypoints插件在这里做得非常好。
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
在插件的站点上有一些例子。
一个基于这个答案的例子,检查一个元素是否有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;
}
在这个伟大答案的基础上,你可以使用ES2015+进一步简化它:
function isScrolledIntoView(el) {
const { top, bottom } = el.getBoundingClientRect()
return top >= 0 && bottom <= window.innerHeight
}
如果你不关心顶部是否跳出窗口而只关心底部是否被看到,这可以简化为
function isSeen(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight
}
或者甚至是单行语句
const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight
我只是想分享一下,我把这个和我的脚本结合起来移动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 scrollspy插件将允许您轻松做到这一点。 https://github.com/thesmart/jquery-scrollspy
$('.tile').on('scrollSpy:enter', function() {
console.log('enter:', $(this).attr('id'));
});
$('.tile').on('scrollSpy:exit', function() {
console.log('exit:', $(this).attr('id'));
});
$('.tile').scrollSpy();