Detecting the end of a scrollable dropdown list
I am generating a select option checkbox dynamically. There can be any number of options. When the user scrolls to the end of the window, I need to fire an event (where I will call the server and populate the selection with more options). This is similar to creating pagination, but in a dropdown.
Can someone tell me how this can be done.
So the only thing I need is to fire an event when the user scrolls to the end of the dropdown. Thats all
<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>
Please don't worry about how I am going to populate the select box with the option as I am using meteorJs so I can achieve this easily.
The only requirement is to fire the event.
you can try this, i created a demo about this and create a popup by scrolling at the bottom of the list.
Working fiddle demo: 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;
}
source to share
There is no way to detect scrolling over the actual element select
, so it is not possible as asked. But you can try creating a custom control that is just a scrollable div and apply a function to it.
UPDATE
For chosen-jquery-plugin
you do events as shown below:
This is how the html
plugin will be generated chosen
for your selection box:
<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>
Write a style for .chosen-drop
and change your styles as below and remove the style inline
fromselect
.scroll
{
line-height:30px;
width:100px;
}
.chosen-drop
{
overflow-y:scroll;
max-height: 90px;
}
Your JS will be
$('.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');
}
}
source to share