import "./styles.css";
import { useState, useRef, useEffect } from "react";
export default function App() {
const [count, setCount] = useState(0);
const srollContainer = useRef(null);
useEffect(()=>{
srollContainer.current.scrollTo({ top: count * 100, behavior: "smooth" });
})
const clickToBtn = (e) => {
testing(e);
};
const testing = (e) => {
if (e.target.textContent === "go to 3 slide") {
setCount(3);
return false;
}
setCount(count + 1);
};
return (
<div className="App">
<h2>COUNT: {count}</h2>
<div className="btn" onClick={clickToBtn}>
next
</div>
<div className="btn" onClick={clickToBtn}>
go to 3 slide
</div>
<div className="btn" onClick={clickToBtn}>
next
</div>
<div className="btn" onClick={clickToBtn}>
next
</div>
<div className="scrollContainer" ref={srollContainer}>
<div className="scrollContent">0</div>
<div className="scrollContent">1</div>
<div className="scrollContent">2</div>
<div className="scrollContent">3</div>
<div className="scrollContent">4</div>
<div className="scrollContent">5</div>
<div className="scrollContent">6</div>
</div>
</div>
);
}