检测可滚动下拉菜单的结束

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在选择框中填充选项，这将很容易实现。

唯一的要求是触发事件。

- user4523328

Answer 1

您可以尝试这个，我创建了一个演示，当您滚动到列表底部时，会生成一个弹出窗口。

工作示例演示：https://jsfiddle.net/j68o44Ld/

<div class="subtask-li">
<span class="main-tlist"> 
<span class="icon-taskListing"></span> 
<span class="subselectedList">Default</span> 
<span class="icon-subcaret"></span> </span>
<ul class="subtask-pick">
<li><a href="javascript:;">General issues</a></li>
<li><a href="javascript:;">Default</a></li>
<li><a href="javascript:;">Android Games Issues</a></li>
<li><a href="javascript:;">pt issues</a></li>
<li><a href="javascript:;">Server Development</a></li>
<li><a href="javascript:;">Resource Integration</a></li>
<li><a href="javascript:;">Server Infrastructure</a></li>
</ul>
    </div>

    $(document).on("click",".main-tlist",function(){
    $('.subtask-pick').toggle();
    });

    $('.subtask-pick').scroll(function () {
          if ($(this)[0].scrollHeight - $(this).scrollTop() <=  $(this).outerHeight()) {
                alert("end of scroll");
              // You can perform as you want

          }
    });



  .subtask-li {
        border: 1px solid #dfe8f1;
        cursor: pointer;
        position: relative;
        background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%) repeat scroll 0 0;
        border-radius: 3px;
        float: left;

        left: 5px;
        padding: 5px;
        top: 6px;
    }


    .subtask-pick{
       background-clip: padding-box;
        background-color: #fff;
        border: 1px solid #dfe8f1;
        border-radius: 3px;
        box-shadow: 0 1px 7px 2px rgba(135, 158, 171, 0.2);
        display: none;
        list-style: outside none none;
        padding: 0 0 10px;
        position: absolute;
        z-index: 9; 
        float: left;
       width: 220px;
        list-style: outside none none; height:220px; overflow:auto;
    }
    .icon-taskListing {
        display: inline-block;
        vertical-align: middle;
    }
    .subselectedList {
        overflow: hidden;
        padding: 0 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 116px;
    }
    ul.subtask-pick li {
      float: none;
      display: block;
      clear: both;

      position: relative;
    }
    ul.subtask-pick li a {
      padding: .9em 1em .9em .8em;
      position: relative;
        clear: both;
      cursor: pointer;
      display: block;

      white-space: nowrap;
       text-overflow: ellipsis;
      overflow: hidden;
    }
    ul.subtask-pick li a:hover {
      background: none repeat scroll 0 0 #eff4f6;
      cursor: pointer;
    }
    a {
      text-decoration: none;
      outline: 0;
      color: #4c4c4c;
    }

- Umesh Sehta

Answer 2

无法检测实际元素的滚动，因此按照要求不可能。但是您可以尝试创建一个自定义的选择框控件，它只是一个滚动的div，并将该功能应用于它。更新演示在这里 对于chosen-jquery-plugin，您可以如下监听事件：这是从所选插件为您的选择框生成的html：<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 编写样式，并按照以下方式修改您的样式，从 select 中删除 inline 样式 .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'); } }

- Guruprasad J Rao

---

正如我所说，您需要通过使用divs替换它来创建自定义的selectbox，就像大多数selectbox插件一样，或者选择任何插件...就像这里的一些插件**here**。 - Guruprasad J Rao

在上面的HTML代码中，你的名为“scroll”的类在哪里？它只在CSS中提到，但在HTML中没有显示？ - user4523328

这是你的选择类别，伙计.. :) - Guruprasad J Rao