如何解决滚动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
.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;
}
解决方法
在执行.container
之前,您必须先听scrollIntoView
的过渡结束。您可以使用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`
});
}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。