如何在中心而不是顶部开始滚动（溢出-y：滚动）div？

Question

在我的代码中，我有一个带有溢出-y 的可滚动 div：滚动。 滚动的开始平底船位于我的 div 的顶部，但我想从 div 的中心开始滚动。 有没有人解决这个问题？

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);
  }
}

Answer 1

当您引用元素时，您可以使用scrollTop and scrollLeft函数并分配高度值，在 position 处，您希望滚动条出现

//it would be somewhat like this 
useEffect(()=>{
  this.ref.portfolioRef.scrollLeft = 200 //x scroll position
  this.ref.portfolioRef.scrollTop = 200  //y scroll position
 },[])