title: how to offset scrollIntoView()
body: <p>Working on a React application and have this function which works to scroll to a div, but it is just slightly off so I need to have it scroll up by 20px or so when it goes to the correct div.</p>
  
  <pre><code>     class CountryDropdown extends Component{
  
      handleScroll = (country) =&gt; {
  
          document.getElementById(country).scrollIntoView({
              block: "start",
              behavior: "smooth"
            })
  
        }
  
      render () {
      return (
          &lt;Dropdown text='Jump to Country'&gt;
              &lt;Dropdown.Menu&gt;
                  &lt;Dropdown.Item flag='fr' text='France' onClick={() =&gt; this.handleScroll("france")}/&gt;
                  &lt;Dropdown.Item flag='es' text='Spain' onClick={() =&gt; this.handleScroll("spain")}/&gt;
                  &lt;Dropdown.Item flag='pt' text='Portugal' onClick={() =&gt; this.handleScroll("portugal")}/&gt;
                  &lt;Dropdown.Item flag='gr' text='Greece' onClick={() =&gt; this.handleScroll("greece")}/&gt;
                  &lt;Dropdown.Item flag='de' text='Germany' onClick={() =&gt; this.handleScroll("germany")}/&gt;
                  &lt;Dropdown.Item flag='at' text='Austria' onClick={() =&gt; this.handleScroll("austria")}/&gt;
              &lt;/Dropdown.Menu&gt;
          &lt;/Dropdown&gt;
      );
  }
  }
  
  
   export default CountryDropdown;
  </code></pre>