определение конца прокручиваемого раскрывающегося списка

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 и применить к нему эту функцию.

UPDATE

DEMO HERE

Для 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'); 
    } 
} 

Answer 2

вы можете попробовать это, я создал демо относительно этого и создать всплывающее окно, прокручивая его в нижней части списка.

Работа скрипки демо: 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; 
    }