JSFiddle - React, Tailwind, and code Playground

by Sethu raman

HTML

<select id="mySelect" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>

JavaScript

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
 var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;
  
    mySelect.scroll(function (e) {
   if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
   {   
       var scrollto=$(this).scrollTop();
       if (isPreviousEventComplete && isDataAvailable) {       
           e.preventDefault();
        isPreviousEventComplete = true;
         
        $.each(myOptions, function(val, text) {            
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
        });
           mySelect.scrollTop( scrollto );
      }
               }
    });