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

【问题标题】：Dynamic scrollbar with height connected to Y scroll coordinates高度连接到 Y 滚动坐标的动态滚动条
【发布时间】：2021-12-25 03:23:45
【问题描述】：

我创建了两个组件“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 和其他东西，但似乎无法正确完成

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案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>
);

【讨论】：