高度连接到 Y 滚动坐标的动态滚动条

Question

我创建了两个组件 'DynamicScrollBarContainer' 和 'DynamicScrollBar'。

我正在尝试使嵌套组件具有与页面的垂直滚动相关的动态高度，并且通过具有两种不同的背景颜色，当用户向上或向下滚动时，容器会被填充或清空页面。

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;

有人有什么想法吗？我一直在搞乱 window.scrollY 和其他东西，但似乎无法正确地做到这一点

Answer 1

那是 BAD idea。在工作中不得不花费数小时来解决此类问题。有的还站着。在做这样的事情之前，你真的应该考虑其他选择。

但是，如果您真的需要，像这样的东西应该可以帮助您入门。

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>
);

高度连接到 Y 滚动坐标的动态滚动条

Dynamic scrollbar with height connected to Y scroll coordinates

javascript

reactjs

styled-components