如何通過在主 div 上創建滾動條來修復全屏覆蓋

Question

我有一個全屏覆蓋，一旦單擊按鈕就會激活。 當點擊后覆蓋消失時，滾動條會出現，然后立即消失，從而在應用程序中快速切換。

我正在使用 react-copy-to-clipboard 和 styled-components。

我想因為<CopyToClipboard />是父 div，我會設置它的樣式，但它把所有東西都扔掉了，這樣做並不簡單，因為它是 react-copy-to-clipboard 的預制組件。

這是我的組件代碼：

return (
      <CopyToClipboard text={background} onCopy={this.changeCopyState}>
        <MainColorBox style={{ background }}>
          <CopyOverlay show={copied} style={{ background }} />
          <CopyMessage show={copied}>
            <h1>Copied!</h1>
            <p text={isLightColor}>{background}</p>
          </CopyMessage>
          <div className='copy-container'>
            <BoxContent>
              <span text={isDarkColor}>{name}</span>
            </BoxContent>
            <CopyBtn text={isLightColor}>Copy</CopyBtn>
          </div>
          {showLink && (
            <Link to={moreUrl} onClick={e => e.stopPropagation()}>
              <SeeMoreBtn text={isLightColor}>MORE</SeeMoreBtn>
            </Link>
          )}
        </MainColorBox>
      </CopyToClipboard>
    );

這是我的<MainColorBox />和<CopyOverlay />的 styles

export const MainColorBox = styled.div`
  width: 20%;
  height: 25%;
  margin: 0 auto;
  margin-bottom: -3.5px;
  display: inline-block;
  position: relative;

  &:hover ${CopyBtn} {
    opacity: 1;
    transition: 0.5s;
  }

  ${({ theme }) => theme.lg`
    width: 25%;
    height: 20%
  `}

  ${({ theme }) => theme.md`
    width: 50%;
    height: 10%
  `}

  ${({ theme }) => theme.xs`
    width: 100%;
    height: 5%;
  `}
`

export const CopyOverlay = styled.div`
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: transform 0.6s ease-in-out;
  transform: scale(0.1);

  ${({ show }) => show && css`
    opacity: 1;
    z-index: 10;
    transform: scale(50);
    position: fixed;
  `}
`

Answer 1

添加

position:fixed;
top: 0px;
left: 0px;

應該解決這個問題

希望這可以幫助