I'm trying to implement a click to scroll function in my react app. I tried using react-scroll library, window.scrollIntoView, and using window.scrollTo with a ref. These didn't work with my app having an overflow, so I'm forced to remove it to get it to work.
.App {
height: 100vh;
overflow-y: scroll; // removing this makes click to scroll work
}
how I used window.scrollTo:
const scrollSection = useRef(null);
const goToSection = () => {
window.scrollTO({
top: scrollSection.current.offsetTop,
behavior: "smooth"
});
and react-scroll:
<Link to="firstSection" spy={true} smooth={true}>
<li></li>
</Link>
Is there a way to get this working with overflow, since I'd like to keep the overflow styling if possible.
Call it on the overflowing element itself, rather than on the window. HTMLElements have a similar function just called scroll().
document.querySelector("button").addEventListener("click", function(){
let target = document.getElementById("scroll");
document.querySelector("div").scroll({
top: target.offsetTop,
behavior: 'smooth'
});
});html, body {margin: 0}
div > p
{
height: 100px;
}
div
{
height: 100vh;
overflow: auto;
}
#scroll
{
height: 240px;
background: red;
}<div>
<button>Scroll</button>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p id="scroll">Scroll to me!</p>
</div>