I created two components 'DynamicScrollBarContainer' and 'DynamicScrollBar'.
I'm trying to get the nested component to have a dynamic height connected to the vertical scrolling of the page, and by having two different background-color the container gets filled or emptied as the user scrolls up or down on the page.
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;
Anyone has any ideas? I have been messing with window.scrollY and other stuff but can't seem to do it properly
That's a BAD idea. Had to spend hours fixing problems with stuff like this at work. Some still standing. Your should really consider other options before doing something like this.
But, if you really have to, something like this should get you started.
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>
);