yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-12 06:58:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix y-position related processing

Browse Source
This commit is contained in:
Sumire Isshiki 2024-03-11 21:56:31 +09:00
parent 3a1f024a90
commit e36deac343
1 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.tsx
View File

@ -20,12 +20,7 @@ export default function App() {
const card = Math.max((window.innerHeight / 2) - window.scrollY, 100); const card = Math.max((window.innerHeight / 2) - window.scrollY, 100);
setCardY(card); setCardY(card);
const mutualsElm = document.getElementById("mutuals"); setContentY(card + (window.innerHeight / 2) + 60 * 2);
let mutualsY = 0;
if (mutualsElm) {
mutualsY += mutualsElm.scrollHeight;
}
setContentY(card + (window.innerHeight / 2) + mutualsY * 2);
const cardElm = document.getElementById("card"); const cardElm = document.getElementById("card");
const contentElm = document.getElementById("content"); const contentElm = document.getElementById("content");
@ -45,11 +40,7 @@ export default function App() {
useEffect(() => { useEffect(() => {
handleScroll(); handleScroll();
window.scrollTo(0, 60)
const mutualElm = document.getElementById("mutuals");
if (mutualElm) {
window.scrollTo(0, mutualElm.scrollHeight)
}
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
return () => { return () => {
@ -61,18 +52,16 @@ export default function App() {
<RecoilRoot> <RecoilRoot>
<ThemeProvider> <ThemeProvider>
<> <>
<div id="mutuals">
<Mutuals /> <Mutuals />
</div>
<div> <div>
<div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}> <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `60px` }}>
<div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}> <div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}>
<Card /> <Card />
</div> </div>
</div> </div>
<div className="grid justify-items-center"> <div className="grid justify-items-center">
<div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px`}}> <div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px` }}>
<div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl"> <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
<div className="hidden md:block md:col-span-1"> <div className="hidden md:block md:col-span-1">
<VerticalMenu /> <VerticalMenu />