使用 Simplebar 自定义 Select2 下拉菜单的滚动条？

Question

我正在尝试使用 SimpleBar 库自定义 Select2 下拉菜单中的滚动条。通常我所做的是按照 Simplebar 库中的说明使用以下标记包装包含滚动条的元素：

<div data-simplebar></div>

但这里棘手的部分是需要包装的 Select2 类 select2-results__options 不仅在页面加载时生成，而且仅在 Select2 下拉菜单打开时生成。

Simplebar 记录了您可以使用的另一种方法：

new SimpleBar(document.getElementById('myElement'));

但是，我尝试定位的元素既不是 Id，也不存在，直到我选择下拉菜单并打开它，这使得它变得无用。

有没有用另一种方法自定义滚动条？

Simplebar 文档：https://github.com/Grsmto/simplebar/tree/master/packages/simplebar

选择2：https://select2.org/getting-started/basic-usage

Answer 1

$('select').on('select2:open', function () {
  var optionsContainer = $('.select2-results__options').get(0);

  setTimeout(function () {
    new SimpleBar(optionsContainer);
  }, 0);
});