Javascript 带滚动的CSS转换

我有一个div，里面有很多文本，我希望它在单击时向下打开并显示文本。我还想在单击div时向下滚动到元素的底部。我尝试了scrollIntoView，但由于某些原因，它无法一直向下滚动到元素的底部。在全屏上，它可以工作，但如果我减小屏幕大小，它的滚动就会减少。似乎它只能在开盘前滚动div下的金额。如有任何建议，将不胜感激

import style from "./education.module.css"
import { useState } from "react"
import { useRef } from "react"
import { useEffect } from "react"

const Education = () => {
  const [opened, setOpened] = useState(false)
  const scrollTo = useRef(null)

  useEffect(() => {
    if (opened) {
      const { bottom } = scrollTo.current.getBoundingClientRect()
      if (
        !(
          bottom <=
          (window.innerHeight || document.documentElement.clientHeight)
        )
      )
        scrollTo.current.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }, [opened])

  return (
    <div
      className={`${style.container} ${opened ? style.heightened : ""}`}
      onClick={() => {
        setOpened(!opened)
      }}
    >
      <p>Végzettségem</p>
      <p ref={scrollTo}>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </p>
    </div>
  )
}

export default Education

---

在执行

scrollIntoView

之前，必须在

.container

的转换结束时进行侦听。您可以使用事件来执行此操作

我也不认为你需要

useffect

hook来完成这个任务

const教育=（）=>{
const[opened，setOpened]=useState（false）；
常量scrollTo=useRef（null）；
const container=useRef（null）；
useffect（（）=>{
const{current:containerElement}=container；
containerElement.addEventListener（“transitionend”，scrollIntoView）；
return（）=>{
containerElement.removeEventListener（scrollIntoView）；
};
}, []);
函数scrollIntoView（）{
log（“转换结束，将滚动到底部”）；
scrollTo.current.scrollIntoView({
行为：“平滑”，
block:“end”//important，应使用`end`代替`start`
});
}
...

---

这意味着我不能同时制作动画和滚动？我不确定是否有办法做到这一点。

.container {
  width: 50vw;
  min-width: 700px;
  background-color: rgb(240, 239, 239);
  border-radius: 10px;
  cursor: pointer;
  height: min-content;
  max-height: 1em;
  padding: 12px;
  font-size: 30px;
  text-align: center;
  margin: auto;
  margin-top: 10vh;
  box-shadow: 2px 2px 2px 1px rgb(187, 187, 187);
  transition: max-height 0s;
  overflow: hidden;
}

.container p:last-child {
  padding: 12px;
  padding-top: 80px;
  margin-top: -50px;
  font-size: 20px;
  text-align: justify;
}

.heightened {
  max-height: 900px;
  transition: max-height 0.3s linear;
}