gistfile1.js

function attachKanbanScrollModifier(){
	$j('.kanban-column').on('scroll',function(){lazyScroll(this);});
}

var lazyScroll = _.debounce(function(column){columnScrolled(column)}, 150);

function columnScrolled(column){
	var $column = $j(column);
	var $columnChildren = $column.children('.task');

	//Find the first visible task
	var colRect = $column[0].getBoundingClientRect();
	var topX = colRect.left + (colRect.width/2);
	var topY = colRect.top + 16;

	var bottomX = colRect.left + (colRect.width/2);
	var bottomY = colRect.bottom - 16;

	var topElem = document.elementFromPoint(topX, topY);
	var bottomElem = document.elementFromPoint(bottomX, bottomY);

	var $topElem = $j(topElem);
	var $bottomElem = $j(bottomElem);

	if(!$topElem.hasClass('task')){ $topElem = $topElem.parents('.task')}
	//Kludge for quick add
	if(!$topElem.hasClass('task')){$topElem = $columnChildren.first(); }
	if(!$bottomElem.hasClass('task')){ $bottomElem = $bottomElem.parents('.task')}
	
	var topElemIndex = $topElem.index();
	var bottomElemIndex = $bottomElem.index();
	

	var numberOfPaddingTasks = 10;

	$topElem = (topElemIndex - numberOfPaddingTasks > 0)  ? $columnChildren.eq(topElemIndex - numberOfPaddingTasks) : $columnChildren.eq(0);
	$bottomElem = (bottomElemIndex + numberOfPaddingTasks < $columnChildren.length)  ? $columnChildren.eq(bottomElemIndex + numberOfPaddingTasks) : $columnChildren.last();
	
	var tasksBeforeView = ($topElem.index() == $columnChildren.first().index()) ? $j([]) : $columnChildren.first().nextUntil($topElem,'.task');
	var tasksAfterView = ($bottomElem.index() == $columnChildren.last().index()) ? $j([]) : $columnChildren.last().prevUntil($bottomElem,'.task');

	var tasksInView = $columnChildren.not(tasksBeforeView).not(tasksAfterView);
	//add/remove the task-off-screen class which is essentially just display: none; and styling
	tasksBeforeView.addClass('task-off-screen');
	tasksAfterView.addClass('task-off-screen');
	
	tasksInView.removeClass('task-off-screen');
	
}