如何使用javascript的按钮流畅地左右滚动?

Question

我使用此代码通过左右按钮滚动我的div 内容。这个简单的代码非常有用，我可以在任何地方使用它。所以我只需要知道如何在这些按钮平滑时滚动。通过编辑这段javascript代码，我可以在单击按钮时流畅地滚动吗？

const buttonRight = document.getElementById('slideRight');
const buttonLeft = document.getElementById('slideLeft');

buttonRight.onclick = function () {
document.getElementById('container').scrollLeft += 150;
};
buttonLeft.onclick = function () {
document.getElementById('container').scrollLeft -= 150;
};

#container {
width: 145px;
height: 100px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#content {
width: 250px;
background-color: #ccc;
}

<div id="container">
<div id="content">Click the buttons to slide horizontally!</div>
</div>
<button id="slideLeft" type="button">Slide left</button>
<button id="slideRight" type="button">Slide right</button>

Answer 1

您可以在容器元素上使用 cssscroll-behavior: smooth;：

const rightButtons = Array.from(document.getElementsByClassName('slideRight'));
const leftButtons = Array.from(document.getElementsByClassName('slideLeft'));
const containers = Array.from(document.getElementsByClassName('container'));
let index = 0;
for (const rightButton of rightButtons) {
const container = containers[index];
rightButton.addEventListener("click", function () {
container.scrollLeft += 150;
});
index++;
}
index = 0;
for (const leftButton of leftButtons) {
const container = containers[index];
leftButton.addEventListener("click", function () {
container.scrollLeft -= 150;
});
index++;
}

.container {
width: 145px;
height: 100px;
border: 1px solid #ccc;
overflow-x: scroll;
scroll-behavior: smooth;
}
.content {
width: 250px;
background-color: #ccc;
}

<div class="container">
<div class="content">Click the buttons to slide horizontally!</div>
</div>
<button class="slideLeft" type="button">Slide left</button>
<button class="slideRight" type="button">Slide right</button>
<div class="container">
<div class="content">Click the buttons to slide horizontally!</div>
</div>
<button class="slideLeft" type="button">Slide left</button>
<button class="slideRight" type="button">Slide right</button>