用JavaScript滚动水平溢出div中心

Question

我在DIV内有一个水平ul作为tabar。当我单击LI元素时，我想将父级中心滚动到视口。如果没有jQuery，我该怎么做？

const tab1 = document.getElementbyId('tab1');
const tabbar = document.getElementbyId('tabbar');
if (tab1) {
  tabbar.scrollLeft = -tabbar.offsetWidth
} else {
  tabbar.scrollLeft = tabbar.offsetWidth
}

<div id="tabbar" class="container">
  <ul class="tabbar">
    <li id="tab1"><a>Tab 1<a/></li>
     <li id="tab2"><a>Tab 2<a/></li>
     <li id="tab3"><a>Tab 3<a/></li>
  </ul>
</div>

当您单击第二个LI元素时，我到底需要更改此功能，以便在每个分辨率下水平滚动到中间？

Answer 1

首先获取所有元素，然后在每个元素上添加一个事件侦听器。
然后，如果侦听器功能，请找到父元素的高度和屏幕高度。
现在，按照上述计算将屏幕顶部应用于窗口。

JS：

var tabs = document.querySelectorAll(".tablinks");
tabs.forEach(function(tab) {
  tab.addEventListener("click", function() {
    var parentDiv = document.getElementById("uix-tabbar");
    var sTop = (parentDiv.clientHeight/2) + (screen.height/2);
    window.scrollTo(0, sTop);
  });
});

如果需要更多信息，请让我知道。希望它有帮助！