带滚动的 CSS 过渡

Question

我有一个 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

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

Answer 1

在执行scrollIntoView之前，您必须监听.container的转换何时结束。 您可以使用transitionend事件执行此操作。

我也不认为你需要useEffect钩子来完成这个。

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

  useEffect(() => {
    const { current: containerElement } = container;
    containerElement.addEventListener("transitionend", scrollIntoView);

    return () => {
      containerElement.removeEventListener(scrollIntoView);
    };
  }, []);

  function scrollIntoView() {
    console.log("transition end, will scroll to bottom");

    scrollTo.current.scrollIntoView({
      behavior: "smooth",
      block: "end" // important, should use `end` instead `start`
    });
  }
  ...