Customize scrollbar of Select2 dropdown with Simplebar?

1
votes

I am trying to customize the scrollbar in Select2 dropdowns with the SimpleBar library. Normally what I do is wrap the element that contains the scrollbar with the following markup as instructed in the Simplebar library:

<div data-simplebar></div>

But the tricky part here is that the Select2 class that needs to be wrapped, select2-results__options, is generated not only when the page is loaded but only when the Select2 dropdown has been opened.

Simplebar documents another method you can use which is this way:

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

However the element I am trying to target is neither an Id nor does it exist until I select the dropdown and open it, rendering this useless.

Is there anyway to customize the scrollbar with an alternative method?

Simplebar documentation: https://github.com/Grsmto/simplebar/tree/master/packages/simplebar

Select2: https://select2.org/getting-started/basic-usage

1
javascriptjqueryjquery-select2simplebar

1 Answers

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

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