Я бы все делал таким образом:
<div class="overflow">
<div class="wrapper">
<div class="item">предыдущие 10 строк</div>
<div class="item">10 строк видимые</div>
<div class="item">следубщие 10 строк</div>
</div>
</div>
где: .overflow и .item имеют одинаковый размер, .overflow имеет overflow:hidden, а .item - обертка для единицы загружаемых данных.
Логика следующая:
при старте загружаем 2 единицы данных - первые 10 строк и следующие 10, следующие 10 никто не видит. Дальше занимаемся «любовными утехами» с событием wheel над нашим блоком + проверяем и отмеряем положение .wrapper относительно верха страницы -> если понимаем что был скролл вниз, то соответственно «двигаем» .wrapper на одну высоту .item'а, т.е. эмулируем скролл, и кроме того загружаем следующие 10 строк, и «аппендим» еще один .item с этими данными в наш .wrapper. Если скролл вверх - то просто эмулируем скролл.
И я бы не советовал совсем уж удалять выведенные уже блоки, пусть будут скрыты - а иначе:
1) придется еще проверять количество .item'ов, и очищать первые (но это мелочь);
2) если была прокрутка вниз, на несколько .item'ов, первоначальные данные очистились, а затем прокрутка вверх - мало того что надо теперь очистить_низ+вставить_данные_вверх, надо еще как то вставлять те данные которые уже были в этом месте.
Да и к тому же - если не очищать, то сократите количество ajax-запросов (будут только на загрузку, а когда данных больше нет - дошел до дна и остается функционал только скролла). Скролл не принципиален, то и пользователям будет логичнее и вам проще все это повесить на кнопки вверх/вниз, в идеале надо делать и со скролом и с кнопками.
Как то так, извините если что-то непонятно, в голове у меня решение быстро нашлось, а вот формулировал я долго, если что - спрашивайте!)
