리액트에서 가로스크롤 마우스휠로 스크롤하는걸 구현하고 싶은데 어떻게 해야되나요
구글링해서 찾아본것들을 적용하면 자꾸 화면이 안보이거나 오류가 뜨는데 어떻게 할까요..ㅠㅠㅠ
제가 대충 긁어 모았던것들도 첨부해 보겠습니다,. 이걸 어찌 적용해야될지모르겟습니당
useEffect(() => {
document.addEventListener('scroll', (e) => {
console.log(e);
const horizontal = e.target.scrollingElement.scrollLeft;
const vertical = e.target.scrollingElement.scrollTop;
e.target.scrollingElement.scrollLeft = vertical
console.log(horizontal, vertical)
});
}, [])
container.addEventListener('wheel', (ev) => {
ev.preventDefault(); // stop scrolling in another direction
// console.log(ev.deltaY);
container.scrollLeft += (ev.deltaY + ev.deltaX);
// console.log('Wheel Move: '+ container.scrollLeft);
});
// horizontal scrolling with arrow keys
document.addEventListener('keydown', function(event) {
if (event.code == 'ArrowRight') {
container.style.scrollBehavior = 'smooth';
container.scrollLeft += 500;
container.style.scrollBehavior = null;
}
if (event.code == 'ArrowLeft') {
container.style.scrollBehavior = 'smooth';
container.scrollLeft -= 500;
container.style.scrollBehavior = null;
}
});
// scroll progress
container.addEventListener('scroll', handleScroll);
function handleScroll() {
let winScroll = container.scrollLeft || container.documentElement.scrollLeft;
let width = container.scrollWidth - container.clientWidth;
let scrolled = (winScroll / width) * 100;
document.getElementById("progressBar").style.width = scrolled + "%";
}
