README

通过使其可拖动并添加左右按钮来改进水平滚动的HTML元素。

使用方法

首先创建一个已经可以水平滚动的元素，为了左右按钮能够正确定位，你可能需要将其包裹在一个相对定位的元素中，例如

<div class="relative">
    <div class="horizontal-scroller">
        <ul class="items">
            <li class="item">Item A</li>
            <li class="item">Item B</li>
            <li class="item">Item C</li>
            <li class="item">Item D</li>
            <li class="item">Item E</li>
            <li class="item">Item F</li>
            <li class="item">Item G</li>
            <li class="item">Item H</li>
            <li class="item">Item I</li>
            <li class="item">Item J</li>
        </ul>
    </div>
</div>

css

.relative {
    position: relative;
}
.horizontal-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}
.items {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 40px;
}
.item {
    flex: 0 0 200px;
    padding: 5%;
    background-color: #ddd;
}

然后通过添加以下JavaScript（这些选项是默认的，所以如果不需要，可以跳过所有这些）来改进它

<script src="horizontal-scroller.js"></script>
<script>
    new HorizontalScroller({
        selector: ".horizontal-scroller",
        buttonRight: true,
        buttonLeft: true,
        draggable: true,
    });
</script>

这将添加两个可以自定义样式的按钮，例如

.horizontal-scroller-button {
    position: absolute;
    display: block;
    height: 50px;
    width: 50px;
    top: 50%;
    transform: translateY(-50%);
}
.horizontal-scroller-button-left {
    left: 0:
}
.horizontal-scroller-button-right {
    right: 0:
}

查看 demo.html 以获取完整的工作演示。