javascript - 如何阻止自定义模式扩展到屏幕之外

Question

我正在尝试创建一个没有任何库的自定义模式。此模式显示当前用户，并且根据活跃用户的数量，它可以变得非常大。如果模态窗口中的元素数量超出了屏幕底部，我将无法看到整个模态窗口。

理想情况下，我希望模态窗口始终居中并包含在屏幕内，如果元素过多，则用户可以在不移动背景的情况下向下滚动模态窗口。非常感谢任何帮助!

这是我到目前为止所得出的结论，但还差得远。模态没有滚动功能，如果太大就会被屏幕 chop :

const Modal: React.FC<IModalProps> = (props) => {
  

     if (!props.isOpen) {
       return null;
     }

  return (
    <>
         <ModalBackgroundStyled onClick={props.onCloseRequest}/>
            <ModalWrapper>
                {props?.users?.map(user=>{
                    return(
                        <NamePlate user={user}/>
                    );
                })}
            </ModalWrapper>
    </>
    )
};

export default Modal;

     const ModalBackgroundStyled = styled.div`
     background-color: rgba(255,255,255,0.5);
     backdrop-filter: blur(2px);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     height:200%;
     width:200%;
     display: flex;
     justify-content: center;
     align-items: center;
   `;

const ModalStyled = styled.div`

    display:flex;
    flex-direction: column;
    align-items:center;
    background: #E5E5E5;
    border-radius: 4px;
    overflow: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    min-width: 30rem;
    z-index: 2;
`;

Answer 1

如果您想让模态框的内容适合屏幕高度并在模态框的内容超过屏幕高度时显示滚动条，您应该设置 max-height ModalWrapper 为小于或等于 View 高度的任何值，并将 overflow-y 设置为 scroll。请参见下面的示例:

const ModalWrapper = styled.div`
      max-height:100vh;
      overflow-y:scroll;
`;