Question

单击滚动按钮后，标签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。通过这种方式，你必须有一个计数器来查看事件触发了多少次以跟踪哪些元素＆＃39;你应该计算宽度。

所以代码看起来像这样。

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，因为当您将元素向左移动宽度增加时。这意味着它每次被解雇时都会有所不同。

滚动后如何确保整个标签可见？

1 个答案: