liabru
Viewport jump despite _maintainScroll
I have ajax load and this code.
In the main js file
$(function() {
$.fn.matchHeight._maintainScroll = true;
$('.fragment-cell').matchHeight({
byRow: true
});
});
in particular js file for ajax.
Query(function($){
$('.all-frag').append( '<span class="load-more">Загрузить ещё</span>' );
$('.pagenav').remove();
var button = $('.all-frag .load-more');
var page = 2;
var loading = false;
// Get max number of pages
var maxpage = beloadmore.maxpage;
$('body').on('click', '.load-more', function(){
if( ! loading ) {
loading = true;
var data = {
action: 'be_ajax_load_more',
page: page,
query: beloadmore.query,
};
$(button).after('<span class="spinner-load"></span>')
$('.load-more').remove()
$.post(beloadmore.url, data, function(res) {
if(res.success) {
// Add and Fade in new articles
$(res.data).hide().appendTo('.all-frag').fadeIn(500);
$('.all-frag').imagesLoaded( function() {
console.log('all images loaded');
$(function() {
$.fn.matchHeight._apply('.fragment-cell');
});
});
$('.spinner-load').remove();
if( page >= maxpage) {
// If last page, remove "load more" button and replace with "No more articles" text.
$('.load-more').remove();
} else {
$('.all-frag').append( button );
}
page = page + 1;
loading = false;
} else {
// console.log(res);
}
}).fail(function(xhr, textStatus, e) {
// console.log(xhr.responseText);
});
}
});
});
I have tried different variants, but this viewport jumping seems irremovable.
Hi. I have the same behavior with ajax load. May be someone solved this problem?
Unfortunately the maintain scroll feature isn't guaranteed to work in every situation, since I think the issue is very dependent on the circumstances of the page change and the browser / OS implementation of scrolling. For example in many cases it's ambiguous (i.e. contextual) where the scroll should be after given a page change and at what exact time the scroll needs to be rectified given things like animations. So it's often the case that a custom implementation will be needed.
