使用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);
});

Answer 2

$('select').on('select2:open', function () {
  const $optionsContainer = $('.select2-results__options');
  const length = $optionsContainer.length;
  setTimeout(() => {
      new SimpleBar($optionsContainer.get(length - 1));
  }, 0);
});