Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: ScrollToTop hört auf window + Ref, main bekommt height:100vh

Browse Source
This commit is contained in:
Dicken
2026-06-13 18:28:36 +02:00
parent 8784f607cb
commit cbb8d59639
1 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/App.jsx
View File

@@ -3220,18 +3220,33 @@ function ScrollToTop({ scrollRef }) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
useEffect(() => { useEffect(() => {
// Prüfe sowohl window als auch den Ref-Container
const el = scrollRef?.current; const el = scrollRef?.current;
if (!el) return;
const onScroll = () => setVisible(el.scrollTop > 300); function check() {
el.addEventListener('scroll', onScroll, { passive: true }); const winScroll = window.scrollY || document.documentElement.scrollTop;
return () => el.removeEventListener('scroll', onScroll); const elScroll = el ? el.scrollTop : 0;
setVisible(winScroll > 300 || elScroll > 300);
}
window.addEventListener('scroll', check, { passive: true });
if (el) el.addEventListener('scroll', check, { passive: true });
return () => {
window.removeEventListener('scroll', check);
if (el) el.removeEventListener('scroll', check);
};
}, [scrollRef]); }, [scrollRef]);
function scrollUp() {
window.scrollTo({ top: 0, behavior: 'smooth' });
if (scrollRef?.current) scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
}
if (!visible) return null; if (!visible) return null;
return ( return (
<button <button
onClick={() => scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' })} onClick={scrollUp}
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: 'calc(70px + env(safe-area-inset-bottom, 0px))', bottom: 'calc(70px + env(safe-area-inset-bottom, 0px))',
@@ -3240,17 +3255,16 @@ function ScrollToTop({ scrollRef }) {
width: 40, width: 40,
height: 40, height: 40,
borderRadius: '50%', borderRadius: '50%',
background: 'rgba(255,255,255,0.08)', background: 'rgba(30,30,40,0.85)',
border: '1px solid rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.18)',
backdropFilter: 'blur(8px)', backdropFilter: 'blur(10px)',
color: 'rgba(255,255,255,0.7)', color: 'rgba(255,255,255,0.85)',
fontSize: 16, fontSize: 18,
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
boxShadow: '0 4px 16px rgba(0,0,0,0.4)', boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
transition: 'opacity 0.2s',
}} }}
title="Nach oben" title="Nach oben"
> >
@@ -3355,6 +3369,7 @@ export default function App() {
const mainStyle = { const mainStyle = {
flex:1, flex:1,
overflowY: 'auto', overflowY: 'auto',
height: '100vh',
...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}), ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}),
}; };