Question

我在div中有一个水平ul作为标签栏。当我单击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);
  });
});

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

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

1 个答案: