Creé dos componentes 'DynamicScrollBarContainer' y 'DynamicScrollBar'.
Estoy tratando de hacer que el componente anidado tenga una altura dinámica conectada al desplazamiento vertical de la página, y al tener dos colores de fondo diferentes, el contenedor se llena o se vacía a medida que el usuario se desplaza hacia arriba o hacia abajo en la página.
import styled from 'styled-components'; export const DynamicScrollbarContainer = styled.div` position: fixed; right: 5%; top: 35%; width: 2px; height: 300px; background-color: rgba(255,255,255,0.5); @media ${(props) => props.theme.breakpoints.xl} { display: none; } `; export const DynamicScrollbar = styled.div` width: 100%; height: 0%; // this is the value I'd need to get dynamic background-color: #ffffff; ` import React from 'react'; import { DynamicScrollbarContainer, DynamicScrollbar } from './ScrollbarStyles'; const ScrollBar = () => ( <DynamicScrollbarContainer> <DynamicScrollbar /> </DynamicScrollbarContainer> ); export default ScrollBar;¿Alguien tiene alguna idea? He estado jugando con window.scrollY y otras cosas, pero parece que no puedo hacerlo correctamente
Esa es una MALA idea . Tuve que pasar horas arreglando problemas con cosas como esta en el trabajo. Algunos aún en pie. Realmente debería considerar otras opciones antes de hacer algo como esto.
Pero, si realmente tiene que hacerlo, algo como esto debería ayudarlo a comenzar.
const ScrollBar = () => const [a, s] = useState(0); useEffect(() => { const c = () => s(window.scroll /* I don't remember the prop, something like this */); // remember to add the other scroll events window.addEventListener('scroll',c) return () => window.removeEventListener(c); }, []); <DynamicScrollbarContainer> <DynamicScrollbar scroll={a} /> </DynamicScrollbarContainer> );