使用javascript滾動水平溢出div中心

Question

我在div中有一個水平ul作為tabbar。 當我點擊一個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);
  });
});

如果需要更多信息，請告知我們。 希望能幫助到你！