Scrolling prevented on page

Is this a bug?
#1

I have a page with a container who’s

  • overflowY is set to “auto”,
  • but overflowX is “hidden”
  • and the height is calc()'ed in css as “100% - 65px”.

I believe this weird setup is causing the Utils.hasScroll() to report “true”,
which when _attachPositioningHandler function runs, cycles through all
of the parent containers who reported true for hasScroll, and then hits:

    $watchers.each(function () {
      Utils.StoreData(this, 'select2-scroll-position', {
        x: $(this).scrollLeft(),
        y: $(this).scrollTop()
      });
    });

    $watchers.on(scrollEvent, function (ev) {
      var position = Utils.GetData(this, 'select2-scroll-position');
      $(this).scrollTop(position.y);
    });

If I remove this one element from the list (ie I put in an if to interrogate the el.id and return false)
then I’m able to scroll just fine. However, of course, I don’t wish to modify the select2.js.

Does anyone have any suggestions?

Thanks

#2

BTW, a coworker was able to find a solution via:

    $('.select-large').on('select2:open', function (e) {
        const evt = "scroll.select2";
        $(e.target).parents().off(evt);
        $(window).off(evt);
    });
1 Like
#3

For anyone else like me who has a very similar issue, but instead of scrolling within the list-options, the issue involves the form-modal context (in a similar layout to what is stated in this thread) - try: javascript - Select2 Bootstrap Modal with Modal Scroll - Stack Overflow