At my page i have about 20 common html select widgets. For example:
This can be achieved with simple JQuery. No need of any other plugin
var selectObj = $("#myselectbox");
var singleoptionheight = selectObj.find("option").height();
var selectboxheight = selectObj.height();
var numOfOptionBeforeToLoadNextSet = 2;
var lastScrollTop = 0;
var currentPageNo = 1;
var isAppending = false;
var currentScroll = 0;
$(document).ready(function() {
$(selectObj).scroll(function(event) {
OnSelectScroll(event);
});
});
function OnSelectScroll(event) {
var st = $(selectObj).scrollTop();
var totalheight = selectObj.find("option").length * singleoptionheight;
if (st > lastScrollTop) {
// downscroll code
$("#direction").html("downscroll");
currentScroll = st + selectboxheight;
$("#scrollTop").html(currentScroll);
$("#totalheight").html(totalheight);
if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) {
currentPageNo++;
LoadNextSetOfOptions(currentPageNo);
}
} else {
// upscroll code
$("#direction").html("upscroll");
}
lastScrollTop = st;
}
function LoadNextSetOfOptions(pageNo) {
//here we can have ajax call to fetch options from server.
//for demo purpose we will have simple for loop
//assuming pageNo starts with 1
var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11
var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21
for (i = startOption; i < endOption; i++) {
$(selectObj).append("");
}
$(selectObj).scrollTop(currentScroll - (selectboxheight));
}
Infinite scroll for select box
Direction:
scrollTop:
totalheight: