如何通过触发按钮上的事件在元素上平滑地左右滚动

Question

如何通过使用JavaScript触发按钮上的事件来在元素上左右平滑滚动？(无jQuery(所以我想点击下一个和上一个按钮，在my-container__content上向左或向右滚动，它里面有很长的内容。

尝试以下似乎不起作用

HTML

<div class="my-container">
<div class="my-container__content" style="overflow-x: scroll;" data-scroll-container>
<div class="my-container__item" width="1000000000px">
</div>
</div>
<div>
<button data-back data-scroll-trigger>Back</button>
<button data-next data-scroll-trigger>Next</button>

JS-

/**
* Selectors
*/
const selectors = {
scrollContainer: '[data-scroll-container]',
scrollTrigger: '[data-scroll-trigger]',
scrollNext: 'data-next',
scrollBack: 'data-back',
};
/**
* Main
*/
const scrollTrigger = [...document.querySelectorAll(selectors.scrollTrigger)];
const scrollContainer = document.querySelector(selectors.scrollContainer);

const handleScroll = ({ target }) => {
if (target.hasAttribute(selectors.scrollBack)) {
scrollContainer.scrollTo({
right: 100,
behavior: 'smooth',
});
} else {
scrollContainer.scrollTo({
right: 100,
behavior: 'smooth',
});
}
};

if (scrollTrigger) {
scrollTrigger.forEach((scroll) => {
scroll.addEventListener('click', handleScroll);
});
}

Answer 1

您必须指定初始值，也可以使用left属性。这是一个逻辑错误。试试这个。这对我有效。

var left = 0;
const handleScroll = ({
target
}) => {
if (target.hasAttribute(selectors.scrollBack)) {
left = left - 100;
scrollContainer.scrollTo({
left: left - 100,
behavior: 'smooth',
});
} else {
left = left + 100;
scrollContainer.scrollTo({
left: left + 100,
behavior: 'smooth',
});
}
};

此外，你必须检查它是否已经达到滚动的极限，才能向前和向后滚动。