javascript - 如何在 Select2 下拉列表中捕获滚动事件？

Question

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

供您参考：

• 我正在使用jQuery，下拉菜单使用Select2.
• 我的idHTML 元素是d. （虽然命名不合适，以后会重命名）

测试解决方案1：（不工作）

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

测试解决方案2：（不工作）

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

标签： javascriptjqueryjquery-select2

Answer 1

问题是由于滚动事件在 DOM 中没有冒泡

方法一

使用mousewheel事件而不是滚动

方法二（推荐）

使用addEventListener

Jquery .on（'scroll'）在滚动时不触发事件

$("#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>