fix: ScrollToTop hört auf window + Ref, main bekommt height:100vh
This commit is contained in:
@@ -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))' } : {}),
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user