如何在 Select2 下拉菜单上捕获滚动事件？

Question

如何为使用 Select2 的 HTML 元素捕获 scroll 事件？我想捕获滚动事件以将 <option> 动态添加到我的下拉列表中。

供您参考：

我正在使用 jQuery，下拉列表使用 Select2。
我的 HTML 元素的 id 是 d。（虽然命名不妥，以后改名）

测试解决方案 1：（无效）

$("body").on("scroll", "#select2-d-results", function(){
   alert('scroll');
})

测试方案二：（无效）

$('#select2-d-results').scroll(function() {
   alert('scroll');
});

Answer 1

问题是由于滚动事件在DOM

中没有冒泡

方法一

使用 mousewheel 事件而不是滚动

方法二（推荐）

使用addEventListener

Jquery .on('scroll') not firing the event while scrolling

$("#d").select2();

// using on mousedown 
$("body").on("mousewheel", "#select2-d-results", function(){
   console.log('mousewheel');
})

// using addEventListener
document.addEventListener('scroll', function (event) {
    if (event.target.id === 'select2-d-results') { 
        console.log('scrolling');
    }
}, true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />

<select id="d" style="width: 300px">
  <option value="1">Argentina</option>
  <option value="2">Brazil</option>
  <option value="3">China</option>
  <option value="4">India</option>
  <option value="5">Indonesia</option>
  <option value="1">Argentina</option>
  <option value="2">Brazil</option>
  <option value="3">China</option>
  <option value="4">India</option>
  <option value="5">Indonesia</option>
</select>

如何在 Select2 下拉菜单上捕获滚动事件？

How to capture scroll event on Select2 dropdown?

javascript

jquery

jquery-select2