检测可滚动下拉列表的结尾

Question

我正在动态生成一个选择选项框。可以有任意数量的选项。当用户向下滚动到框的末尾时，我需要触发一个事件（我将调用服务器并用更多选项填充选择）。它就像创建一个分页，但在下拉框中。

谁能告诉我如何做到这一点。

所以我唯一需要的是触发一个事件，当用户滚动到下拉列表的末尾时。就这样

<select style="height: 30px;line-height:30px;" class="scroll">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select>

请不要担心我将如何用选项填充选择框，因为我使用的是meteorJs，我会很容易地实现它。

唯一的要求是触发一个事件。

Answer 1

无法检测实际select元素上的滚动，因此按照要求这是不可能的。但是您可以尝试创建一个自定义选择框外观控件（它只是一个滚动 div）并将该功能应用于它。

更新

演示在这里

对于您chosen-jquery-plugin让事件监听如下：

这是从插件为您的选择框html生成的方式：chosen

<div class="chosen-container chosen-container-single chosen-container-active" style="width: 100px;" title="">
    <a class="chosen-single" tabindex="-1">
        <span>1</span>
        <div><b></b></div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off"/>
        </div>
        <ul class="chosen-results">
            <li class="active-result result-selected" data-option-array-index="0">1</li>
            <li class="active-result" data-option-array-index="1">2</li>
            <li class="active-result" data-option-array-index="2">3</li>
            <li class="active-result" data-option-array-index="3">4</li>
            <li class="active-result" data-option-array-index="4">5</li>
            <li class="active-result" data-option-array-index="5">6</li>
            <li class="active-result" data-option-array-index="6">7</li>
            <li class="active-result" data-option-array-index="7">8</li>
        </ul>
    </div>
</div>

编写样式.chosen-drop并如下修改样式并inline从中删除样式select

.scroll
{
    line-height:30px;
    width:100px;
}

.chosen-drop
{
    overflow-y:scroll;
    max-height: 90px;
}

你的JS是

$('.chosen-drop').on('scroll',chk_scroll);

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    console.log(elem[0].scrollHeight-elem.scrollTop());
    console.log(elem.outerHeight());
    if (elem[0].scrollHeight - elem.scrollTop() <= elem.outerHeight()) 
    {
        alert('bottom');
    }
}