javascript - 以固定窗口大小滚动长数据

Question

我想创建固定大小的窗口，所以如果组件<Message/>中的文本较长（如附加图像中），我希望它在固定窗口大小上滚动。

截屏

export default function AllMessages(){
  ...
    return(
        <div className="message-style">
           ...  
            <div className="message-item">
                {messagesState.map(message => (
                    <ul class="list-group">
                        <Message from = {message.sender} to = {message.receiver} subject = {message.subject} content = {message.message} date = {message.creationDate}/>
                    </ul>
                ))}
            ...
}

export default function Message(props){
    return(
             <li class="list-group-item">
                <div className="container-msg">
                    <div>
                        <h5>{props.from}</h5>
                        <h5>{props.to}</h5>
                        <p>{props.subject}</p>
                        <p>{props.content}</p>
                        <p>{props.date}</p>
                    </div>
                    <div>
                        <span className="mx-2 text-danger" /*onClick={handleDelete}*/>
                            <i className="fas fa-trash" />
                        </span>
                    </div>
             </div>
        </li>

    )
}

标签： javascriptcssreactjs

Answer 1

您必须为所有消息容器 div 设置一个高度和最大高度，然后设置 overflow-y auto 例如

.all-messages{
    height:500px;
    max-height:500px;
    overflow-y:auto;
}