title: scrollIntoView() is not working: does not taking in account fixed element
body: <p>I'm trying to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="noreferrer"><code>scrollIntoView()</code></a> in my application, but because I have a top fixed bar, when I use the <code>scrollIntoView()</code>, the elements will be scroll to the fixed bar back.</p>
  
  <p>This means that when I try to put some element visible to the user, by scrolling the element to a visible area, it will be scrolled, but to another invisible ate that is were this fixed bar is.</p>
  
  <p>Follows an example of what I'm trying to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let element = document.getElementsByClassName('second-element')[0];
  element.scrollIntoView();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixed-element{
    height: 30px;
    width: 100%;
    background-color:black;
    position:fixed;
  }
  
  .parent-element {
     width: 100%;
     height: 40000px;
     background-color:blue;
  }
  
  .element {
     width: 100%;
     height:100px;
     background-color: yellow;
     margin-top:10px;
  }
  
  .second-element{
     width: 100%;
     background-color: red;
     height:200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-element"&gt;&lt;/div&gt;
  &lt;div class='parent-element'&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='second-element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
    &lt;div class='element'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There is any way that I could use this function in a way that the scroll elements not became invisible because of the fixed bar?</p>
  
  <p>I would like a vanilla JavaScript solution. Also, and only if it is possible, a solution that doesn't need to know the existent of any fixed elements.</p>