info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-22 08:53:01 +02:00
Code Issues Releases Wiki Activity

fix: scroll to top when user hides answer

Browse Source
This commit is contained in:
Kamran Ahmed
2023-09-02 01:59:07 +01:00
parent e4c29b03ab
commit fba926625d
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Questions/QuestionCard.tsx
View File

@@ -16,18 +16,18 @@ export function QuestionCard() {
if (answerHeight > questionHeight) { if (answerHeight > questionHeight) {
questionRef.current!.style.height = `${answerHeight}px`; questionRef.current!.style.height = `${answerHeight}px`;
} }
// if the user has scrolled down and the top of the answer is not
// visible, scroll to the top of the answer
const questionTop = questionRef.current?.getBoundingClientRect().top || 0;
if (questionTop < 0) {
window.scrollTo({
top: window.scrollY + questionTop - 100,
});
}
} else { } else {
questionRef.current!.style.height = `auto`; questionRef.current!.style.height = `auto`;
} }
// if the user has scrolled down and the top of the answer is not
// visible, scroll to the top of the answer
const questionTop = questionRef.current?.getBoundingClientRect().top || 0;
if (questionTop < 0) {
window.scrollTo({
top: window.scrollY + questionTop - 100,
});
}
}, [isAnswerVisible]); }, [isAnswerVisible]);
return ( return (
@@ -70,10 +70,23 @@ export function QuestionCard() {
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, quod, quas, quia, voluptates voluptate quibusdam voluptatum, quod, quas, quia, voluptates voluptate quibusdam
voluptatibus quos quae quidem. Quisqu voluptatibus quos quae quidem. Quisqu<br />
<br />
Quisquam voluptatum, quod, quas, quia, voluptates voluptate
quibusdam voluptatibus quos quae quidem. Quisquam voluptatum, quod,
quas, quia, voluptates voluptate quibusdam voluptatibus quos quae
quidem. Quisquam voluptatum, quod, quas, quia, voluptates voluptate
quibusdam voluptatibus quos quae quidem.
<br />
<br />
Quisquam voluptatum, quod, quas, quia, voluptates voluptate
quibusdam voluptatibus quos quae quidem. Quisquam voluptatum, quod,
quas, quia, voluptates voluptate quibusdam voluptatibus quos quae
quidem. Quisquam voluptatum, quod, quas, quia, voluptates voluptate
quibusdam voluptatibus quos quae quidem.
</p> </p>
</div> </div>
<div className="text-center mt-7"> <div className="mt-7 text-center">
<button <button
onClick={() => { onClick={() => {
setIsAnswerVisible(false); setIsAnswerVisible(false);