JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fixed" ng-controller="Main">
<div id="content"></div>
<div id="scroller" style="position:absolute;top:0px;right:0px;width:20px;height:400px;overflow-y: auto;">
<div id="inner"></div>
</div>
</div>
CSS
#fixed {
height: 400px;
overflow-y: auto;
width:200px;
}
.item{
position:absolute;
}
JavaScript
function Main($scope,$compile,$rootScope,$element) {
var
conts=$element.children()[0],//document.getElementById("content"),
scroller=$element.children()[1],//document.getElementById("scroller"),
inner=scroller.children[0],//document.getElementById("inner"),
counter = 0, //счетчик для айдишники
cache={};//закешированные видимые элементы
//все загруженные в infinityScroll элементы
$scope.items = [];
//загрузка данных (эмитация)
function load(){
var items=[];
for (var i = 0; i < 10; i++) {
items.push({id: counter});
counter ++;
}
return items;
}
//подгружаем данные
loadMore = function() {
load().forEach(function(item){
//вычислим позицию по вертикали
var lastItem=$scope.items[$scope.items.length-1];
item.top=lastItem?(lastItem.top+lastItem.height):0;
//отрисуем элемент
renderItem(item);
$scope.items.push(item);
})
//посчитаем высоту скроллБара
heightCalc();
};
//отрисовываем запись
function renderItem(item){
//создадим элемент и откомпилим его
var el = angular.element('<div class="item" reklama="word" id="'+item.id+'">2</div>');
var compiled = $compile(el);
//вставим в dom
conts.appendChild(el[0]);
//запомним высоту
item.height=el[0].offsetHeight;
//установим позицию
el[0].style.top=item.top+"px";
//запомним отрисованные элементы в кеше
cache[item.id]=el;
//установим scope
compiled($scope);
return el;
}
//вычисляем высоту для скроллбара
//TODO оптимизировать вычисление высоты перебирая только добавленные элементы вместо всех
function heightCalc(){
var height=0;
...