Issue with Select2.js

[jbarkun]

Hello,

First off, thank you for creating such an easy to use plugin!

I'm using ASScroll on a new build, and ran into some issues when using it alongside Select2.js. Select2.js offers styled select dropdowns instead of relying on the browser, including features like autocomplete. Unfortunately, when trying to scroll through a Select2.js dropdown, ASScroll triggers and starts scrolling the page behind the dropdown instead.

I put together a codepen of the issue here.

Any ideas why this would be happening, and how it could be resolved? Is there a way to tell ASScroll not to scroll the page when the mouse is over a specific element (like the dropdown)?

Thanks again!

[ashthornton]

Hi @jbarkun, that is a very interesting issue! Thanks for raising it.

I have some ideas about how to fix this internally but as a temporary fix you should be able to call .disable() on your ASScroll instance when a Select2 is opened. It's been a while since I used Select2 but I think I remember there being open/close events - that would probably be the best place to disable/enable.

Let me know if this doesn't work. But I will look at fixing this on the ASScroll side too.

[jbarkun]

Woah you're fast!

Just tried your suggestion on my build and it works great 👍 Thank you for the quick response, it's really appreciated. I'll let you know if I notice any issues with this approach as I keep working.

[ashthornton]

Part of this issue is fixed in 1.7.6 by providing the class .asscroll-block, which can be added to the dropdown element in the Select2 options:

$('.select').select2({
    dropdownCssClass: 'asscroll-block'
})

This will prevent the page from scrolling when trying to scroll the dropdown element. The issue of the dropdown position not syncing with the page scroll is out of the scope of this project and would just require some manual position updates within Select2 based on the ASScroll position.