Internet Explorer не может понять координаты переполнения div

Question

У меня есть элемент, который находится внутри контейнера с переполнением: авто, чтобы сделать его прокручиваемым для маленьких экранов.Когда экран достаточно узок, и содержащийся элемент шире контейнера (будь то, что правая сторона содержащегося элемента больше или равна правой стороне контейнера, или что крайняя левая точка содержащегося элемента меньше или равнакнопки контейнера), кнопка со стрелкой появится на каждой стороне контейнера, и когда прокрутка достигнет своего максимума вправо или влево, соответствующая кнопка будет отключена и выделена серым цветом (это именно то, что делает код ниже).Эта функция выполняется каждый раз, когда я нажимаю один из элементов внутри содержащегося элемента, когда я нажимаю одну из кнопок прокрутки, упомянутых ранее, а также когда компонент монтируется (я использую React).Теперь мой код отлично работает на Chrome, Firefox и Edge, но в IE правая кнопка сразу отключается и становится серой, и причина этого в том, что IE считает, что самая правая координата содержащегося элемента - это координата контейнера!Кроме того, когда я прокручиваю содержащийся элемент влево, координаты правой стороны содержащегося элемента совпадают с координатами той части, где он был вырезан в начале (поэтому они уменьшаются и меньше, чем крайняя правая координата контейнера, хотя в некоторых случаях он все еще переполняет его вправо).

Я не знаю, как заставить IE интерпретировать, что самая правая сторона содержащегося элемента находится там, где элемент действительно заканчивается, а не там, где он перестает быть видимым(и сохранение этой точки в качестве конечной точки при прокрутке).

Итак, overflowWrapper - это контейнер с переполнением: auto, а tabsPanel - содержащийся элемент.

Вот мой javascriptкод на случай, если это поможет:

const grayOutButtons = () => {
  const wrapper = document.getElementById('tabsOverflowWrapper');
  const overflowWrapperRect = wrapper.getBoundingClientRect();
  const tabsPanel = document.getElementById('tablistPanel');
  const tabsPanelRect = tabsPanel.getBoundingClientRect();
  const tabsPanelMargin = tabsPanel.style.marginLeft.match(/[0-9]/g).join('');

  if (Math.floor(tabsPanelRect.right) <= Math.ceil(overflowWrapperRect.right)) {
    $('#rightScrollBtn')
      .css({ opacity: '0.2' })
      .prop('disabled', true);
    $('#leftScrollBtn')
      .css({ opacity: '1' })
      .prop('disabled', false);
  } else if (tabsPanelRect.left + parseInt(tabsPanelMargin) >= overflowWrapperRect.left) {
    $('#rightScrollBtn')
      .css({ opacity: '1' })
      .prop('disabled', false);
    $('#leftScrollBtn')
      .css({ opacity: '0.2' })
      .prop('disabled', true);
  } else {
    // $('#rightScrollBtn').attr('disabled');
    $('#rightScrollBtn')
      .css({ opacity: '1' })
      .prop('disabled', false);
    // $('#leftScrollBtn').attr('disabled');
    $('#leftScrollBtn')
      .css({ opacity: '1' })
      .prop('disabled', false);
  }
  console.log(`tabpanel right: ${Math.floor(tabsPanelRect.right)}`);
  console.log(`overflowwrapper right: ${Math.ceil(overflowWrapperRect.right)}`);
};```