I'm trying to connect some custom scrollbars with Select2 4.0. I found some old topics here on stackoverflow, but the solutions (with select2 3.4 i.e.) seems to be outdated.

I tried: jquery.scrollpane and jquery.nicescroll. Both scrollbars don't work with Select2 4.0. Or maybe I did something wrong?

scrollpane solution (when used, "No results found" error occures)

$(function() {
	$('.select2-with-scroll').jScrollPane();
	
	$w.on('resize', function() {
		$('.select2-with-scroll').jScrollPane();
	});
}); 

<select class="select2-with-scroll">
  <option value=""></option>
  <option value="50">50</option>
  <option value="55">55</option>
  <option value="60">60</option>
  <option value="65">65</option>
  <option value="70">70</option>
  <option value="75">75</option>
  <option value="80">80</option>
  <option value="85">85</option>
  <option value="90">90</option>
  <option value="95">95</option>
  <option value="100">100</option>
</select>

I'm trying to connect some custom scrollbars with Select2 4.0. I found some old topics here on stackoverflow, but the solutions (with select2 3.4 i.e.) seems to be outdated.

I tried: jquery.scrollpane and jquery.nicescroll. Both scrollbars don't work with Select2 4.0. Or maybe I did something wrong?

scrollpane solution (when used, "No results found" error occures)

$(function() {
	$('.select2-with-scroll').jScrollPane();
	
	$w.on('resize', function() {
		$('.select2-with-scroll').jScrollPane();
	});
}); 

<select class="select2-with-scroll">
  <option value=""></option>
  <option value="50">50</option>
  <option value="55">55</option>
  <option value="60">60</option>
  <option value="65">65</option>
  <option value="70">70</option>
  <option value="75">75</option>
  <option value="80">80</option>
  <option value="85">85</option>
  <option value="90">90</option>
  <option value="95">95</option>
  <option value="100">100</option>
</select>

nicescroll solution (absolutely no effects, HTML as above)

$(document).ready(
  function() { 
    $("select2-with-scroll").niceScroll();
  }
);

Is there any other custom scrollbars which I can use with Select2 4.0? Or maybe it's possible to connect nicescroll or scrollpane with Select2? Any help will be appreciated.

• javascript
• jquery
• jscrollpane
• jquery-select2
• nicescroll

1 Answer 1

With select2 v4.0 + nicescroll v3.6.6 try to make something like this

$('select').select2()
.on("select2:open", function () {
    $('.select2-results__options').niceScroll();
});