JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
    <div class="div">hello</div>
</div>

CSS

.wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: scroll;
}
.inside {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
    vertical-align: middle;
    text-align: center;
}
.new {
    display: table-cell;
    vertical-align: middle;
}
.div {
    display: inline-block;
    margin-right: 10px;
}
.load-more {
    color: red;
    display: inline-block;
    display: none;
    cursor: pointer;
}
.load-more:first-of-type {
    display: inline-block;
}

JavaScript

$(document).ready(function () {

    var divs = $(".wrap > .div");
    for (var i = 0; i < divs.length; i += 3) {
        divs.slice(i, i + 3).wrapAll("<div class='inside'><div class='new'></div></div>");
    }

});


$(document).ready(function () {

    Resize();
});

$(window).resize(function () {
    Resize();
});

function Resize() {
    var windowHeight = $(window).height() + 'px';
    $('.inside').css('height', windowHeight);
}


$(document).ready(function () {

    $(".new .div:last-child").after("<span class='load-more'>More?</span>");
    $('.inside').hide().filter(":first-child").show();

    $('.load-more').click(function () {
        var nextinside = $(this).parent().parent('.inside').nextAll(".inside:first"),
            nextloadmore = $(this).nextAll(".load-more:first");
        
        $(this).hide();
        nextinside.fadeIn();
        nextloadmore.fadeIn();
        $('.wrap').animate({
            scrollTop: nextinside.index()  * nextinside.offset().top 
        }, 700);
    });
});