Kendo Drop down list positioning issue on scroll of the page?

Question

I am using kendo dropd own. I am facing an issue on scroll of the page when the drop down was opened. Here is the example.

jsfiddle demo

When kendo ui drop down opened try to scroll with the mouse wheel, the kendo dropdown list is detaching from it and moving on the page with the scroll. Is there any fix for this. Either to make it close on scroll or move it with the drop down itself(without detaching from that element).

To produce the scenario in this link:

1. open the drop down list
2. Using mouse scroll wheel move the page up/down . List also will move to up and down by detaching from the element

Any help much appreciated. thanks in advance

HTML

<div id="container">
    <p>Scroll down for the KendoDropDownList:</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <select id="select">
        <option value="1">item 1</option>
        <option value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
    </select>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

JS

$("#select").kendoDropDownList();

CSS

#container
{
    width:400px;
    height:200px;
    overflow:auto;
    position:fixed;
    top:100px;
    left:50px;
    border:1px solid #666;
}

html
{
    font:12px sans-serif;
}

Answer 1

Check this link

On scrolling just enable close event from kendo

http://jsfiddle.net/krustev/cQGrK/

   $(document.body).find("[data-role=popup]").each(function() {
   var popup = $(this).data("kendoPopup");
   popup.close();
   });

Answer 2

The code bellow will let your Dropdown-list be closed whenever You try to scroll.

$('#ScrollingBox').scroll(function() {
   $("#YourDropdownListID").data("kendoDropDownList").close();
});