I am working on a code where I have a scrollable div with overflow-y: scroll. However, the default scrolling starts at the top of my div when I want it to start in the middle. Can anyone suggest a solution for this issue?
export function Portfolio({ children }) {
const portfolioRef = React.useRef(null)
return (
<div ref={portfolioRef} className={styles.component}>
{ children }
</div>
)
}
.component {
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
height: 30rem;
margin: auto;
& > * {
margin-top: var(--size-xxs);
margin-bottom: var(--size-xss);
}
}