title: Scroll horizontal overflow div center with javascript
body: <p>I have a horizontal ul as tabbar inside a div. When i click on a li element, i want to scroll the parent div center to the viewport. How can i do that without jquery?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const tab1 = document.getElementbyId('tab1');
  const tabbar = document.getElementbyId('tabbar');
  
  if (tab1) {
    tabbar.scrollLeft = -tabbar.offsetWidth
  } else {
    tabbar.scrollLeft = tabbar.offsetWidth
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="tabbar" class="container"&gt;
    &lt;ul class="tabbar"&gt;
      &lt;li id="tab1"&gt;&lt;a&gt;Tab 1&lt;a/&gt;&lt;/li&gt;
       &lt;li id="tab2"&gt;&lt;a&gt;Tab 2&lt;a/&gt;&lt;/li&gt;
       &lt;li id="tab3"&gt;&lt;a&gt;Tab 3&lt;a/&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What exactly do I need to change about this function so that the container scrolls horizontally into the middle at each resolution when you click on the second li element?</p>