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

debugcn 发表于 Dev

文君

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

供您参考：

我正在使用jQuery，下拉菜单使用Select2.
该id说的我的HTML元素d。（虽然命名不合适，以后会改名）

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

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

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

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

用户863

问题是由于滚动事件没有在 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。