如何水平滚动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" />

预期 output

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

Answer 1

您可以使用element.scroll(...)来完成您想要的：

一些注意事项：

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" />