I have a react component which has quite a lot of components. Then I have this list which only has the overflow property as auto. The parent element for this list has a property overflow: hidden;
Now I am trying to scroll to an active element in the list based on certain criteria. I referred to this article [https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element][1] but then I got to understand that this will only work if the parent has a scroll property is there any other solution or a package to handle this.
//App.js
import React, { useRef, useEffect } from "react";
import "./App.css";
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const useMountEffect = (fun) => useEffect(fun, []);
const useScroll = () => {
const htmlElRef = useRef(null);
const executeScroll = () => {
if (htmlElRef.current) window.scrollTo(0, htmlElRef.current.offsetTop);
};
return [executeScroll, htmlElRef];
};
const App = () => {
const [executeScroll, elementToScrollRef] = useScroll();
useMountEffect(executeScroll);
return (
<ul>
{list.map((item) => (
<li className="box" ref={item === 10 ? elementToScrollRef : null}>
{item}
</li>
))}
</ul>
);
};
export default App;
App.css
#root{
overflow:hidden;
}
ul {
max-height: calc(100px + 2rem);
overflow: auto;
}
.box {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
margin: 1rem;
}
