title: If scrollIntoView working not good enough / scrollIntoView not working / scrollIntoView alternative
body: <p>I have faced with the problem that scrollIntoView some times wokrs good, some times no (in most cases not good).So I tried to find an alternative and some kind of it was <a href="https://medium.com/@vigu_madurai/solved-alternate-to-the-default-scrollintoview-8da76e083066" rel="nofollow noreferrer">this article.</a></p>
  
  <p>But in my program i needed also a horizontal scrolling to element and vertical scrolling showing element in the top of parent window.</p>
  
  <p>So I modifed code from article.</p>
  
  <pre><code>/* This is the main function where which pass two ref parameters of Parent element &amp; Child element */
  function scrollIntoView(parent, child) {
    const parentBounding = parent.getBoundingClientRect(),
        clientBounding = child.getBoundingClientRect();
  
    const parentTop = parentBounding.top,
        clientTop = clientBounding.top,
        parentLeft = parentBounding.left,
        clientLeft = clientBounding.left - 400; /* 400 is a shift so that each difference is not nailed to the upper left edge. You can delete it */
  
    if (parentTop &gt;= clientTop) {
      scrollTo(parent, -(parentTop - clientTop), 300, 'vertical');
    }
    else {
      scrollTo(parent, clientTop - parentTop, 300, 'vertical');
    }
  
    if (parentLeft &gt;= clientLeft) {
      scrollTo(parent, -(parentLeft - clientLeft), 300, 'horizontal');
    }
    else {
      scrollTo(parent, clientLeft - parentLeft, 300, 'horizontal');
    }
  }
  
  function scrollTo(element, to, duration, type) {
  
    let start = (type == 'vertical') ? element.scrollTop : element.scrollLeft,
        currentTime = 0,
        increment = 20;
  
    let animateScroll = function() {
      currentTime += increment;
  
      let val = easeInOutQuad(currentTime, start, to, duration);
      if (type == 'vertical') {
        element.scrollTop = val;
      }
      else {
        element.scrollLeft = val;
      }
  
      if (currentTime &lt; 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 &lt; 1) return (endPos / 2) * time * time + startPos;
    time--;
    return (-endPos / 2) * (time * (time - 2) - 1) + startPos;
  }
  </code></pre>