javascript - 如何确保滚动后整个选项卡可见？

Question

单击滚动按钮后，tabs div 内的按钮应该向左滚动一定数量的像素，但有时我最终会看到一些按钮只显示其中的一部分。

所以我的问题是如何确保选项卡 div 可见区域内的开始按钮始终 100% 可见？

我已经尝试使用 clientWidth、offsetWidth 和许多其他变量进行计算，但不知道如何进行。

仅供引用，我不知道预先会有多少个按钮，并且按钮的长度也不同。

JavaScript:

function moveLeft(){

    var items = document.getElementsByClassName('item');
    var wrapper = document.getElementById('tabs')
    var clientWidth = wrapper.clientWidth;
    var scrollWidth = wrapper.scrollWidth;

    for (var i = 0; i < items.length; i++) {
        items[i].style.left = '-'+clientWidth.toString()+'px'
    }
}

CSS:

    #wrapper {
        width: 300px;
        white-space: nowrap;
    }

    button {
        display: inline-block;
    }

    #tabs {
        width: 300px;
        display: inline-block;
        overflow: hidden;
    }

    .item {
        position: relative;
        left: 0;
        transition: left 1s;
        margin-right: 20px;
    }

HTML:

<div id="wrapper">
    <div id="tabs">
        <button class="item">Tab1</button>
        <button class="item">Tab2Tab2Tab2</button>
        <button class="item">Tab3Tab3Tab3Tab3Tab3Tab3</button>
        <button class="item">Tab4</button>
        <button class="item">Tab5Tab5Tab5Tab5</button>
        <button class="item">Tab6</button>
        <button class="item">Tab7</button>
        <button class="item">Tab8</button>
        <button class="item">Tab9</button>
        <button class="item">Tab10</button>
        <button class="item">Tab11</button>
        <button class="item">Tab12</button>
        <button class="item">Tab13</button>
        <button class="item">Tab14</button>
        <button class="item">Tab15</button>
    </div>
    <button onclick="moveLeft()">></button>
</div>

Answer 1

我建议不要采用特定像素大小的方式，而是将其移动一段长度(比方说 2 个 div)。这样你就必须有一个计数器来查看事件被触发了多少次，以跟踪你应该计算哪些元素的宽度。

所以代码看起来像这样。

var widthToMove = items[counter*2].clientWidth + items[counter*2+1].clientWidth + 40 //40 for the margin in between
for (var i = 0; i < items.length; i++) {
            items[i].style.left = items[i].offsetLeft - widthToMove + 'px';
        }

我不会为此使用 clientWidth，因为当您将元素向左移动时，宽度会增加。这意味着它每次被发射时都会有不同的移动。