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

Question

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

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