javascript - 如何在保持居中的同时水平滚动到容器中的项目？

Question

我有一个容器中的项目列表。容器占据父容器的整个宽度，如果需要，允许项目水平溢出。这是它的样子:

ul {
  list-style: none;
  display: flex;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  border: 1px dotted black;
}

li {
  margin-right: 10px;
}

li:last-child {
  margin-right: 0;
}

a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  color: black;
  background-color: white;
  border: 1px solid black;
}

a.active {
  background-color: blue;
}

<ul id="container">
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#" class="active" id="element">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

在项目列表中，有一个具有 .active类(class)。我想以一种使该项目完全居中的方式水平滚动容器。为此，我编写了以下函数:

function toMiddle(element, container) {
    if (container === undefined) {
        container = window;
    }
    var elementRect = element.getBoundingClientRect();
    var absoluteElementLeft = elementRect.left;
    var middleDiff = (elementRect.width / 2);
    var scrollLeftOfElement = absoluteElementLeft + middleDiff;
    var scrollX = (scrollLeftOfElement - (container.getBoundingClientRect().width / 2));
    container.scrollTop = 0;
    container.scrollLeft = scrollX;
}

我试图调用它来使容器居中，如下所示:

toMiddle(document.getElementById("element"), document.getElementById("container"));

不幸的是，这似乎无法正常工作。知道如何解决这个问题吗？我到底做错了什么？
请注意 , scrollIntoView()效果很好，但它也会垂直滚动整个页面，这对我的用例来说是 Not Acceptable 。

Answer 1

您可以使用 .offsetLeft查找与左侧的距离而不是 .getBoundingClientRect() 的方法方法。并用 .clientWidth 计算事件项目的宽度方法而不是 .width我还添加了.resize事件元素的保存方法centered .
有用的链接:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

function toMiddle(container_id) {
    var container = document.getElementById(container_id);
    var elementRect = document.querySelector('#' + container_id + ' .active');
    var absoluteElementLeft = elementRect.offsetLeft;
    var middleDiff = (elementRect.clientWidth / 2);
    var scrollLeftOfElement = absoluteElementLeft + middleDiff;
    var scrollX = (scrollLeftOfElement - (container.clientWidth / 2));
    container.scrollTop = 0;
    container.scrollLeft = scrollX;
}
/*Initialize on page load*/ 
toMiddle("container");


/*Window resize then active item tab should be centered*/ 
var timeout = 0;
window.onresize = () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        toMiddle("container");
    }, 500)
}

/*Click on item tab then should be centered*/ 
var allItem = [...document.querySelectorAll('#container li a')]
allItem.forEach(element => {
    element.addEventListener('click', (e)=> {
        allItem.forEach(ele => {
            ele.classList.remove('active');
        })
        /*Add active class*/ 
        e.target.classList.add('active');

        /*Call the function for set item tab in centered*/ 
        toMiddle("container");
    })
});

ul {
    list-style: none;
    display: flex;
    overflow-x: auto;
    padding: 10px;
    margin: 0;
    border: 1px dotted black;
    position: relative;
}
li {
    margin-right: 10px;
}
li:last-child {
    margin-right: 0;
}
a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 8px;
    color: black;
    background-color: white;
    border: 1px solid black;
    transition: 0.5s ease-in;
}
a.active {
    background-color: #0156e8;
    border: 1px solid #00389a;
    color: #fff;
}

<ul id="container">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    <li><a href="#">Item 8</a></li>
    <li><a href="#">Item 9</a></li>
    <li><a href="#">Item 10</a></li>
    <li><a href="#">Item 11</a></li>
    <li><a href="#">Item 12</a></li>
    <li><a href="#">Item 13</a></li>
    <li><a href="#">Item 14</a></li>
    <li><a href="#">Item 15</a></li>
    <li><a href="#">Item 16</a></li>
    <li><a href="#">Item 17</a></li>
    <li><a href="#" class="active">Item 18</a></li>
    <li><a href="#">Item 19</a></li>
    <li><a href="#">Item 20</a></li>
    <li><a href="#">Item 21</a></li>
    <li><a href="#">Item 22</a></li>
    <li><a href="#">Item 23</a></li>
    <li><a href="#">Item 24</a></li>
    <li><a href="#">Item 25</a></li>
    <li><a href="#">Item 26</a></li>
    <li><a href="#">Item 27</a></li>
    <li><a href="#">Item 28</a></li>
    <li><a href="#">Item 29</a></li>
    <li><a href="#">Item 30</a></li>
    <li><a href="#">Item 31</a></li>
    <li><a href="#">Item 32</a></li>
    <li><a href="#">Item 33</a></li>
</ul>