Решено: альтернатива scrollIntoView () по умолчанию

Привет, я предполагаю, что вы знакомы с javascript и использовали scrollIntoView в своей работе. Если нет, прочтите эту статью для лучшего понимания.

Этот пост предназначен для вас, если вы столкнулись с проблемой, используя метод element.scrollIntoView () для выделения элемента в представлении экрана.

Проблемы, с которыми вы могли столкнуться, заключаются в следующем:

Иногда поведение scrollIntoView является неожиданным (сама страница перемещается вместо перемещения элемента)

Плохая кросс-браузерная совместимость

Я столкнулся с той же проблемой и попытался решить ее после большого количества исследований в Интернете. Это чисто ванильный javascript, и не нужно беспокоиться о совместимости.

// This is the main function where which pass two ref parameters of Parent element & Child element
export const scrollIntoView = (parent, child) => {
  
  const parentBounding = parent.getBoundingClientRect(),
    clientBounding = child.getBoundingClientRect();
  
  const parentBottom = parentBounding.bottom,
    parentTop = parentBounding.top,
    clientBottom = clientBounding.bottom,
    clientTop = clientBounding.top;
  
  if (parentTop >= clientTop) {
    scrollTo(parent, -(parentTop - clientTop), 300);
  } else if (clientBottom > parentBottom) {
    scrollTo(parent, clientBottom - parentBottom, 300);
  }
  
};
function scrollTo(element, to, duration) {
  
  let start = element.scrollTop,
    currentTime = 0,
    increment = 20;
  
  let animateScroll = function() {
    currentTime += increment;
    
    let val = easeInOutQuad(currentTime, start, to, duration);
    element.scrollTop = val;
    
    if (currentTime < duration) {
      setTimeout(animateScroll, increment);
    }
  };
  
  animateScroll();
}
// Function for smooth scroll animation with the time duration
function easeInOutQuad(time, startPos, endPos, duration) {
  time /= duration / 2;
  
  if (time < 1) return (endPos / 2) * time * time + startPos;
time--;
  return (-endPos / 2) * (time * (time - 2) - 1) + startPos;
}

Надеюсь, код чистый и понятный. Если вам сложно понять или вы обнаружили проблему, прокомментируйте ее. Скоро ссылку с работающей моделью.