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

This commit is contained in:
2026-06-13 18:28:36 +02:00
parent 8784f607cb
commit cbb8d59639

View File

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