3

I have created an event listener that causes an overflowing dropdown to scroll on a keydown event listener. It's needed to override some pesky jQuery UI. It all works perfectly well except for in Internet Explorer... Here is my function:

function addKeyboardScroll(element) {
  element.addEventListener('keydown', e => {
    // find the select dropdown list, and if not enough items to have scrollable overflow return.
    const dropdown = element.querySelector('.choices__list--dropdown');
    if (!dropdown.scrollHeight) return;

    // find the select item that is highlighted, and if none exist return;
    const item = element.querySelector('.is-highlighted');
    if (!item) return;

    // We don't want to trigger scroll on placeholder select items as it will skew the scroll function.
    if (item.classList.contains('choices__placeholder')) return;
    if (e.key === 'ArrowDown') {
      dropdown.scrollTop += 30;
    } else if (e.key === 'ArrowUp') {
      dropdown.scrollTop -= 30;
    }
  });
}

On I.E. the pixels are never being added/subtracted from my overflowing element, hence no scrolling. From all my research everything I'm using has I.E. support and I made sure to give dropdown an overflow: scroll for safe measure, but no luck. Trying to use the ie inspector is making me want to claw my eyes out so help is appreciated. Is there a keyword I'm missing or an extra step needed to get a scroll action for i.e.?

Tasha Zuniga
  • 43
  • 1
  • 3

1 Answers1

0

You Might want to try this, for An older doctype in IE

var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

Or have a look athe the IE - Source link below...

Refs:

  1. IE -Source
Dean Van Greunen
  • 5,060
  • 2
  • 14
  • 28