Некорректная работа on('click'...) с flex-direction
 

Привет. Такой вопрос (может кто-то сможет подсказать):
Интернет-магазин. Страницы категорий (сетка товаров и текстовое описание). Реализована Ajax-подгрузка товаров (при клике на кнопку под товарами).
Был запрос от SEO перенести тексты выше товаров с отображением под ними. Сделано было изменением порядка вывода в шаблоне с flex-direction: column-reverse.
Все вроде ок, но обратил внимание, что кнопка подгрузки стала работать не совсем корректно:
При клике на неё, когда она располагается ближе к нижней части экрана, все норм - новая порция товаров подгружается и юзер видит первый ряд этой новой порции
При клике кнопки, "отскроленной" от низа экрана пикселей на 200 и выше, юзер видит последний ряд новой порции, что неудобно, приходится скроллить вверх/искать начало порции.
Хз что с этим делать) Думаю, что из-за смены порядка отображения элементов флексом у браузера трабл с рассчетом координат кнопки, т.е. когда она в центре экрана, он видимо считает, что её верхняя граница достигла верхнего края экрана.
Может быть кто-то сталкивался с подобным) поделитесь опытом, как разрулить

А как у вас выглядит разметка?

andrey0881, при нажатии на кнопку у вас загружается, и вставляется код с товарами в страницу.

Перед тем как вставлять, надо применить стиль

.products-wrapper {
	margin-bottom: 100vh;
}

Затем установить таймер на 1мс, и вставить код с товарами в страницу. Затем можно удалить стиль.

Спасибо)
такое, не совсем что-то

загрузку товаров не трогаю
просто перед этим старым кодом добавил addClass для .products-wrapper
весь код загрузки/вставки товаров - в setTimeout с 1мс задержки
ну и после removeClass как просто, так и со своим setTimeout

в итоге результат, по сути, тот же
что-то похожее на то, что нужно, если не удаляю класс, но, естественно, пустая простыня, да и на первом клике все равно не совсем так - на экране место добавляемого маржина, а не товары (последующие клики, как и нужно (если не считать "простыни":) ) - остаемся на первом ряду новой порции товаров)

Было ощущение, что товары не успевают подгружаться до удаления класса, для эксперимента выставил паузу 5сек для удаления - успевают подгрузиться, но все-таки без нужного отображения

почему, подгрузка товаров происходит

да, с онклик на кнопке игрался (оставалась ссылка на закомментированную productsWrapper) -убрал

$(function () {
    var moreDoorsContent = $(".bx_catalog_list_home"),
        allContent = $(".content"),
        btnDoors = allContent.find(".more_button"),
        currentPageDoors = btnDoors.data("currentpage");

    $(document).on('click', '.more_button', function (e) {
        //e.preventDefault();
        $('.products-wrapper').addClass("add-margin");
        
        setTimeout(function() { 
            var allDoors = btnDoors.data("allcount"),
                doorsOnOnePage = btnDoors.data("size");
    
            console.log(currentPageDoors);
            $.ajax({
                url: window.location.href,
                type: "get",
                data: {
                    PAGEN_1: ++currentPageDoors
                },
                complete: function () {
                    if (currentPageDoors * doorsOnOnePage >= allDoors) {
                        allContent.find('.btn__tab_line').hide();
                    }
                },
                success: function (data) {
    
                    console.log(window.location.href);
    
                    //allContent.find(".more_button").parents('.btn__tab_line').remove();
                    
                    moreDoorsContent.append($(data).find('.bx_catalog_list_home').html());
                    $(".nktl_pagination_wrp").html($(data).find('.nktl_pagination_wrp').html());
    
                    moreDoorsContent.find('div[style*="clear: both"]').remove();
                    console.log(moreDoorsContent.find('div[style*="clear: both"]:first-child'))
    
                    moreDoorsContent.append('<div style="clear: both"></div>')
    
                },
                error: function (data) {
                    console.log('error');
                }
            });
            //$('.products-wrapper').removeClass("add-margin");
        }, 1);
        setTimeout(function() { $('.products-wrapper').removeClass("add-margin") }, 1);
        
        
    });
});

вот так все выглядит, забрал кусок из main.js в отдельный файл для удобства, добавил пару строк с добавлением/удалением класса и тайм-аутом

Да, вариант с margin-bottom: 100vh; что-то не совсем так работает в вашем случае!

Вот с сокрытием $('.category_description_content') на время вставки...

$(function() {
	var moreDoorsContent = $(".bx_catalog_list_home")
	  , allContent = $(".content")
	  , btnDoors = allContent.find(".more_button")
	  , currentPageDoors = btnDoors.data("currentpage");

	$(document).on('click', '.more_button', function(e) {
		var allDoors = btnDoors.data("allcount")
		  , doorsOnOnePage = btnDoors.data("size");

		$.ajax({
			url: window.location.href,
			type: "get",
			data: {
				PAGEN_1: ++currentPageDoors
			},
			complete: function() {
				if (currentPageDoors * doorsOnOnePage >= allDoors) {
					allContent.find('.btn__tab_line').hide();
				}
			},
			success: function(data) {
				$('.category_description_content').hide();
				
				setTimeout(function() {
					moreDoorsContent.append($(data).find('.bx_catalog_list_home').html());
					$(".nktl_pagination_wrp").html($(data).find('.nktl_pagination_wrp').html());
					moreDoorsContent.find('div[style*="clear: both"]').remove();
					moreDoorsContent.append('<div style="clear: both"></div>');
					
					$('.category_description_content').show();
				}, 1);

			},
			error: function(data) {
				console.log('error');
			}
		});
	});
});

да, в целом идея верная
спасибо)
правда не пойму почему хайд срабатывает через раз, а то и 3-4