Scroll event not call in Datalist using javascript

Question

Below my View Code. I am using datalist for dropdown but can not call scroll event for more data load and I want only 20 record show after scroll more data add using javascript

<input type="text" name="product" list="myselectbox"/>
<datalist id="myselectbox">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    ...
    <option>100</option>
</datalist>

//JavaScript

var mySelect = $('#myselectbox');
mySelect.scroll(function (e) {
        alert("b");
)};

Answer 1

You can be able to achieve the scroll event, only if the child height is greater than the parent's height. In such case, the child will overflow. So in your case, i believe you have given fixed height to the myselectbox , so if the child content exceeds, it will scroll.

Now you can detect whether the scroll of myselectbox reached it's end, and then add new items to the list dynamically.

In order to detect the scroll has completed, please refer to this .