使用javascript滚动水平溢出div中心

Question

我有一个水平 ul 作为 div 内的标签栏。当我单击 li 元素时，我想将父 div 中心滚动到视口。没有 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);
  });
});

如果需要更多信息，请告诉我。希望对您有所帮助！