时间戳

首页 > 解决方案 > 组件超出页面使其不可滚动

javascript - 组件超出页面使其不可滚动

问题描述

我有一个组件当前从页面延伸到我看不到它的地方。我无法向下滚动查看它，但如果我要缩小整个组件，则可见。我怎样才能让它可滚动？有没有一种简单的方法我应该用css做到这一点？

问题截图：（https://i.gyazo.com/263d39c105e90c043b07460ed6b4b9b7.png）

家长代码：

        <div className='candidates-list right'>
                <div className='row'>
                    <h1 className='pipeline-title'>Jobs</h1>
                    <button
                        className='create-job'
                        onClick={(e) => {
                            this.showCreateJob(e);
                        }}
                    >
                        Create Job
                    </button>
                </div>
                <JobCard
                    className='jobs-card'
                    jobs_info={this.state.jobs_info}
                    test={this.test}
                    jobCall={this.test2}
                />
            </div>

工作卡类

render() {
        if (this.props.jobs_info === undefined) {
            return null;
        }

        return (
            <div className='jobs-card'>
                <div className='row'>
                    {
                        // Ternary statement - return empty div if lenght == 0
                        // Otherwise, return a map function to loop through array
                        // of candidate_info
                        this.props.jobs_info.length === 0 ? (
                            <div></div>
                        ) : (
                            this.props.jobs_info.map((element) => (
                                <JobsInfo
                                    key={element.id}
                                    jobs_info={element}
                                    test={this.props.test}
                                    jobsCallback={this.jobsCallback}
                                />
                            ))
                        )
                    }
                </div>
            </div>
        );
    }

JobsInfo 类

    render() {
    return (
        <div className='row'>
            <div className='container' onClick={this.test}>
                <div className='row'>
                    <div className='job-title'>
                        {this.props.jobs_info.title}
                    </div>
                </div>
                <div className='row wrapper'>
                    <div className='category-title'>Category</div>
                    <div className='location-title'>Location</div>
                    <div className='type-title'>Type of Job</div>
                    <div className='creator-title'>Job Creator</div>
                </div>
                <div className='row wrapper'>
                    <div className='category'>
                        {this.props.jobs_info.job_team.title}
                    </div>
                    <div className='location'>
                        {this.props.jobs_info.job_location.title}
                    </div>
                    <div className='type'>
                        {this.props.jobs_info.job_work_type.title}
                    </div>
                    <div className='creator'>
                        {this.props.jobs_info.user.name}
                    </div>
                </div>
            </div>
            <div
                className='counter-container'
                id='counter-container'
                onMouseEnter={this.changeBackground}
                onMouseLeave={this.changeBackground2}
            >
                Candidates <br />
                {this.props.jobs_info.candidates_count}
            </div>

            <div className='delete-container center'>
                <ion-icon id='trash' name='trash'></ion-icon>
            </div>
        </div>
    );
}

标签： javascriptcssreactjsjsx

解决方案

正如 MonteCristo 所说，我们需要查看您的代码。但这里有一个快速的猜测：

您可能想在 css中添加overflow-y:scroll;到您的课程中。.container

请注意，您还需要height: 500px;（或任何其他身高）才能overflow工作。

推荐阅读