如何水平滚动div中的元素javascript/jquery

Question

描述

我有一个div，里面有几个元素，它们的总和比div本身长。请参阅以下片段以更好地理解：

代码

.boxSlider {
width: 100%;
overflow-x: auto;
white-space: nowrap;
display: inline-block;
}
.box {
display: inline-block;
background-color: cyan;
width: 100px;
}

<div class="boxSlider">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>
<input type="Button" value="Scroll left"/>
<input type="Button" value="Scroll right" />

预期输出

我想使用按钮使用jquery或纯javascript向左或向右滚动。

Answer 1

您可以使用元素.woll(…)来完成您想要的：

一些注意事项：

1. 注意浏览器兼容性
2. 你可以简单地使用element.left += 50，但你失去了流畅的功能，在我看来，这更人性化。另一方面，它兼容所有浏览器

const boxSlider = document.getElementById('boxSlider');
document.getElementById("btnLeft").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft + 100,
behavior: 'smooth'
});
}

document.getElementById("btnRight").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft - 100,
behavior: 'smooth'
});
}

.boxSlider {
width: 100%;
overflow-x: auto;
white-space: nowrap;
display: inline-block;
}
.box {
display: inline-block;
background-color: cyan;
width: 100px;
}

<div id="boxSlider" class="boxSlider">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>
<input id="btnLeft" type="Button" value="Scroll left"/>
<input id="btnRight" type="Button" value="Scroll right" />