javascript - 如何正确制作垂直可滚动区域

Question

我构建了一个像这样的简单布局:

问题:我无法滚动侧边栏，如果我尝试滚动整个页面就会滚动。

布局最初是在 GoogleMap.js 中使用 styled-components 定义的。 :

import React, { Component } from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';
import ShipTracker from '../components/ShipTracker';
import SideBar from '../components/SideBar';

const MapContainer = styled.div`
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 200px;
    grid-gap: 10px;
    height: 100vh;
    grid-template-areas: "google-map   sidebar" "ship-tracker sidebar";

    .google-map {
        background: #424242;
        grid-area: google-map;
        position: relative;
        height: 100%;
        width: 100%;
    }
    .map-sidebar {
        background: #9dc183;
        grid-area: sidebar;
    }
    .ship-tracker {
        grid-area: ship-tracker;
    }
`;

下面是来自 SideBar.js 的片段:我应该提到，这使用 React Card因为侧边栏将填充一定数量的带有图像、描述等的卡片:

const Sidebar = () => (
    <div className="map-sidebar">
        <Row>
            <Col sm="11">
                <Card className="mb-2">
                    <CardImg />
                    <CardBody>
                        <div>
                            <img src={image} alt="Atchafalaya" />
                        </div>
                        <td />
                        <CardTitle>
                            <h3>Atchafalaya</h3>
                        </CardTitle>
                        <CardText>
                            <h6>Project Details</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer
                                adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                            </p>
                            Trailing Suction Hopper Dredge
                        </CardText>
                        <div class="btn-toolbar">
                            <button type="button" id="btnSubmit" class="btn btn-primary mr-3">
                                Download Project Specs
                            </button>
                        </div>
                    </CardBody>
                </Card>
            </Col>
        </Row>

及其相关的SideBar.css:

html,
body,
.flex-vertical {
    height: 100%;
    margin: 0;
}
.flex-vertical {
    display: flex;
    flex-flow: column;
}
.map-sidebar {
    display: flex;
    flex-flow: column;
    flex: 1;
    overflow: hidden;
}
tbody {
    overflow-y: scroll;
    cursor: default;
}

到目前为止我所做的事情:

1) 我认为问题可能出在.css文件，我达到了上面放置的最佳(迄今为止)配置。虽然我以为flex-flow:是要更改以使侧栏滚动的主要参数。但没有成功。

2) 我不确定是否styled-components可能是这种行为的原因。我之所以这么说，是因为布局是如何划分的。所以我不确定参数 position: 是否有效玩起来可能会有帮助。

3) 也许<div className="map-sidebar"> 中缺少一些东西。但我不确定如果是这样的话会发生什么。

4) 最后，我使用了 React Card因为侧边栏将由 Cards 填充包含船舶的各种信息。

感谢您指出正确的方向。

Answer 1

您将溢出设置为“隐藏”，但您可以将其更改为overflow-y:scroll;，这样它就会永久添加滚动条。如果您希望滚动条仅在必要时出现，可以将其设置为 overflow-y: auto;。