css - 如何在另一个 div 上显示带有孩子的 div

Question

我有一个反应应用程序（聊天应用程序），我想在 div 中显示一个活动用户列表，该列表显示在应用程序上，如下所示。

它确实有效，问题是任何人都可以向右滚动，并且当它应该被隐藏时，这个 div 可以是可见的。

实际上，客户端的 div 是一个包含空 div 的 div（所以当我单击这个空 div 时，客户端可以隐藏）和客户端 div（蓝色的）。

我想知道如何隐藏和显示这个 div 但避免向右滚动

聊天组件代码

    return(
        <div>
            {/**Chat Container */}
            <div className={ChatCss.chatContainer}>
                <div className={socketConnected ? ChatCss.connected : ChatCss.disconnected}></div>
                <div onClick={showClientsContainer} className={ChatCss.usersIconContainer}>
                    <img src={usersIcon} className={ChatCss.userIcon} alt='usersIcon'/>{`(${clients && clients.length})`}
                </div> 
                <h3 className={ChatCss.title}>CHAT</h3>
                <div className={ChatCss.chatBox}>
                    {mensajes && mensajes.map((mensaje, index) => (
                        <Mensaje key={mensaje.usuario + index} usuario={mensaje.usuario} 
                            mensaje={mensaje.mensaje} 
                            color={mensaje.color}
                        />
                    ))}
                </div>
                <form onSubmit={enviarMensaje}>
                    <input ref={txtMensaje} className={ChatCss.chatTextbox} placeholder=''/>
                    <button className={ChatCss.sendButton}>
                        <img className={ChatCss.sendIcon} src={sendIcon} alt='sendIcon'/>
                    </button>
                </form>
            </div>

            {/*Clients div */}
            <div className={`${ChatCss.clientsContainer} ${showClients ? ChatCss.active : ChatCss.hidden}`}>
                <div onClick={hideClientsContainer} className={ChatCss.clientsEmpty}></div>
                <div className={ChatCss.clientsList}>
                {
                    <ul className={ChatCss.userList}>
                        {clients && clients.map((cliente, index) => (
                            <li className={ChatCss.users} key={cliente.id}>
                                <div className={ChatCss.connected}></div>
                                {cliente.usuario}
                            </li>
                        ))}
                    </ul>
                }
                </div>
            </div>
        </div>
    )

CSS 代码

@keyframes showClients{
    0%{
        transform: translateX(100%);
    }

    100%{
        transform: translateX(0%);
    }
}

@keyframes hideClients{
    0%{
        transform: translateX(0%);
    }
    
    100%{
        transform: translateX(100%);
    }
}

.chatContainer{
    display: absolute;
    height: 70%;
    width: 100%;
}

.title{
    text-align: center;
    margin-bottom: 5vh;
}


.connected{
    display: inline-block;
    border-radius: 50%;
    background-color: green;
    width: .5em;
    height: .5em;
    margin-right: .5em;
}

.disconnected{
    display: inline-block;
    border-radius: 50%;
    background-color: red;
    width: .5em;
    height: .5em;
    margin-right: .5em;
}

.userList{
    list-style: none;
}

.user{
    display: inline-block;
}

.chatBox{
    width: 100%;
    height: 70vh;
    background-color: white;
    overflow-y: auto;
    margin-bottom: .5em;
}

.chatTextbox{
    display: inline-block;
    width: 85%;
    height: 3em;
}

.sendButton{
    display: inline-block;
    border-radius: 50%;
    height: 3em;
    width: 3em;
    background-color: #4ca6f8;
}

.sendIcon{
    width:80%;
}

.usersIconContainer{
    float: right;
}

.userIcon{
    width: 1.2em;
}

.clientsContainer{
    position: absolute;
    top: 0;
    right:0;
    height:100vh;
    width: 100vw;
    overflow-x: hidden;
}

.clientsList{
    display: inline-block;
    background-color: blue;
    width: 50vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.clientsEmpty{
    display: inline-block;
    opacity: 0;
    width:50vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.hidden{
    animation: hideClients 350ms forwards;
}

.active{
    animation: showClients 350ms forwards;
}

标签： cssreactjs