Big List

by Bacher

HTML

<div id="content">
    <div class="block">
        <div class="block-inner1">
            <div class="block-inner2">
                <div class="block-inner3">
                    <div class="block-inner4">
                        <div class="block-inner5">
                            <div class="block-inner6">
                                <div class="block-inner7">
                                    <div class="block-inner8">
                                        <div class="block-inner9">
                                            <div class="block-inner10">
                                                <div class="scrollable">
                                                    <div class="item">Item</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <span class="block-span">
                                    Text 2
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.scrollable {
    border: 1px solid red;
    height: 400px;
    overflow: scroll;
}

JavaScript

var $container = $('#content');

var $block = $('.block');
var $scrollItem = $block.find('.item');
for (var i = 200; --i;) {
    var $newItem = $scrollItem.clone(true);
    
    $newItem.text('Item ' + Math.random());
    $newItem.insertAfter($scrollItem);
}

var blocks = [];

for (var j = 10000; --j;) {
    blocks.push($block.clone(true).appendTo($container));
}

blocks.forEach(function($block) {
    $block.css('display', 'none');
});


debugger