我遇到了页面中不必要滚动的问题，我尝试了各种选项，例如：
overflow:'hidden'文件名为 MapHome 文件的代码：
import React from "react";
import {
makeStyles,
withStyles,
Typography,
Container,
Grid,
Box,
Button,
FormControl,
FormHelperText,
FormGroup,
} from "@material-ui/core";
import ellipse53 from '../Images/MapIt/MapHome/ellipse53.svg';
import rectangle13 from "../Images/MapIt/MapHome/rectangle13.svg";
import vector2 from "../Images/MapIt/MapHome/vector2.svg";
import mapIt from "../Images/MapIt/MapHome/mapIt.svg";
import frame214 from "../Images/MapIt/MapHome/frame214.svg";
import frame423 from "../Images/MapIt/MapHome/frame423.png";
import frame426 from "../Images/MapIt/MapHome/frame426.png";
import step1 from "../Images/MapIt/MapHome/step1.svg";
import step2 from "../Images/MapIt/MapHome/step2.svg";
import step3 from "../Images/MapIt/MapHome/step3.svg";
import finalStep from "../Images/MapIt/MapHome/finalStep.svg";
import Preview from "./Preview.js";
import PopupHome1 from './PopupHome1.js'
import PopupHome2 from "./PopupHome2";
//Checkbox library
import Checkbox from '@material-ui/core/Checkbox';
import CircleCheckedFilled from '@material-ui/icons/CheckCircle';
import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import { Link } from "react-router-dom";
//form Library
const styles = makeStyles({
mapHome: {
minHeight: "1560px",
maxWidth: "1440PX",
overflow: "auto",
},
//*Main Grid
frame751: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1078px",
height: "1445px",
padding: "80px 181px 157px 181px",
},
//Background vector specification
rectangle13: {
position: "absolute",
left: "40px",
top: "-30px",
zIndex: 0,
},
vector2: {
position: "absolute",
left: "1070.84px",
top: "420.94px",
zIndex: 0,
},
ellipse53: {
position: "absolute",
left: "-100px",
top: "1273px",
zIndex: 0,
},
//1 Subgrid: Name:Map IT and
frame750: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1078px",
height: "649px",
padding: "0px",
marginBottom: "64px",
},
mapIt: {
position: "static",
width: "293px",
height: "112px",
marginTop: "20px",
},
frame749: {
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
width: "1078px",
height: "509px",
padding: "0px",
top:'50px'
},
frame346: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "509px",
padding: "0px",
margin: "0px 142px 0px 0px",
},
frame518: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "254.59px",
height: "241px",
padding: "0px",
margin: "24px 0px",
},
group36: {
position: "static",
width: "254.59px",
height: "185px",
margin: "0px 0px 8px 0px",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
},
frame426: {
position: "absolute",
margin: "58.14px 0px 56px 99.46px",
},
frame517: {
position: "static",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
width: "224px",
height: "48px",
padding: "0px",
},
frame215: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "196px",
padding: "0px",
},
frame216: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "88px",
padding: "0px",
margin:'0px 0px 24px 0px',
justifyContent:'space-between'
},
frame216info1:{
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
fontFeatureSetting:'ss03 on',
},
frame217: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "84px",
padding: "0px",
justifyContent:'space-between'
},
frame217info2:{
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
fontFeatureSetting:'ss03 on',
},
frame198: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "635px",
height: "448px",
padding: "0px",
justifyContent:'space-between',
},
frame198Title:{
position: 'static',
width: '453px',
height: '48px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '32px',
lineHeight: '48px',
variant:'h3',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
frame198info1:{
position: 'static',
width: '635px',
height: '64px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#2D86D9'
},
frame198info2:{
position: 'static',
width: '635px',
height: '160px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
frame198info3:{
position: 'static',
width: '635px',
height: '128px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
//2.SubGrid: Steps details and Checkbox
frame748: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1077px",
height: "732px",
padding: "0px",
top:'64px'
},
frame538: {
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: 'center' ,
width: "1077px",
height: "300px",
margin:'0px 0px 64px 0px',
left:'81px',
justifyContent:'space-between',
},
frame564:{
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent:'space-between',
width: "915px",
height: "144px",
padding: "0px",
margin:'0px 0px 8px 0px',
left:'100px'
},
frame663:{
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "170px",
height: "280px",
padding: "0px",
marginRight:'78.33px'
},
imageHover:{
"&:hover": {
transform:"rotate(-5deg)",
transition:'0.5s',
}
},
stepInfo:{
display:'flex',
alignItems:'center',
textAlign:'center',
justifyContent:'center',
color:'#000000',
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
},
frame188:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "636px",
height: "400px",
padding: "0px",
marginLeft:'441px'
},
frame597:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "636px",
height: "88px",
padding: "0px",
margin:'0px 0px 24px 0px'
},
frame597info1:{
position:'relative',
width:'452px',
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '24px',
lineHeight: '32px',
variant:'h4',
color:'#24243F',
margin:'0px 0px 8px 0px'
},
frame597info2:{
position:'relative',
width:'636px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
color:'#000000',
},
frame331:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent:'space-between',
width: "636px",
height: "160px",
padding: "0px",
margin:'0px 0px 32px 0px'
},
frame213:{
position:'static',
display:'flex',
flexDirection:'column',
alignItems:'flex-start',
padding:'0px',
width:'579px',
height:'72px',
},
frame188button: {
borderRadius: "32px",
textTransform:"none",
width:"636px",
height:"64px",
fontWeight: '',
fontSize:"16px" ,
lineHeight: '24px',
variant:'body',
justifyContent:'center',
alignItems:'center',
padding:'10px 20px',
color:'white',
backgroundColor:'#24243F',
margin:'20px 0px 0px -10px',
},
});
// Checkbox Shape and color Customization //
const CustomColorCheckbox = withStyles({
root: {
color: "#BBBECC",
"&$checked": {
color: '#656C88'
},
margin: "16 px"
},
checked: {}
})((props) => <Checkbox color="default" {...props} />);
//schema definiion for Form using Yup
export default function MapHome() {
const classes = styles();
// State definition and handle change for checkbox
const [state, setState] = React.useState({
checked1: false,
checked2: false,
});
const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};
const { checked1, checked2} = state;
const error1 = [checked1].filter((v) => v).length !== 1;
const error2 = [checked2].filter((v) => v).length !== 1;
return (
<div style={{minHeight:'1600px'}} >
<Grid direction='column'>
<Grid item xs className={classes.rectangle13}>
<img src={rectangle13} alt="rectangle 13" />
</Grid>
<Grid item xs className={classes.vector2}>
<img src={vector2} alt="vector 2" />
</Grid>
<Grid item xs className={classes.ellipse53}>
<img src={ellipse53} alt="ellipse53" />
</Grid>
</Grid>
<Container className={classes.mapHome}>
<Grid direction="column" item xs className={classes.frame751}>
<Grid order="0" item xs className={classes.frame750}>
<Grid order="0" item xs className={classes.mapIt}>
<img src={mapIt} alt="MAP IT" />
</Grid>
<Grid
order="1"
item
xs
direction="row"
className={classes.frame749}
>
<Grid item xs direction="column" className={classes.frame346}>
<img src={frame214} alt="20 Minutes 3 Steps" />
<Box className={classes.frame518}>
<Box className={classes.group36}>
<img src={frame423} alt="20 Minutes 3 Steps" />
<img
src={frame426}
alt="20 Minutes 3 Steps"
className={classes.frame426}
/>
</Box>
<Box className={classes.frame517}>
<Preview />
</Box>
</Box>
<Box className={classes.frame215}>
<Box className={classes.frame216}>
<Typography className={classes.frame216info1}>What you will get</Typography>
<PopupHome1 />
<PopupHome2/>
</Box>
<Box className={classes.frame217}>
<Typography className={classes.frame216info1}>What you can use it for</Typography>
<Typography className={classes.frame217info2}>Funding applications</Typography>
<Typography className={classes.frame217info2}>Communication materials</Typography>
</Box>
</Box>
</Grid>
<Grid item xs direction="column" className={classes.frame198}>
<Typography className={classes.frame198Title}>What is this section about?</Typography>
<Typography className={classes.frame198info1}>
In this section you will map the story of your project in order to start measuring the impact of your work.
</Typography>
<Typography className={classes.frame198info2}>
Every project starts with hopes and expectations on how things will work out.
Once we start mapping our assumptions on how the project might progress,
we can begin to visualise our project’s journey, challenges it might face or
the knock on effects it might create.
</Typography>
<Typography className={classes.frame198info3}>
In three steps, you will go through questions modeled on the Theory of Change.
At the end of this section, you’ll get a project narrative written in your own words
and a visual version called ‘Story of Change’.
</Typography>
</Grid>
</Grid>
</Grid>
{/*Subgrid 2: Steps details and Checkbox*/}
<Grid order='1' direction='column' item xs className={classes.frame748} >
<Grid order='0' item xs className={classes.frame538}>
{/*step 1 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={step1} alt="step 1" className={classes.imageHover} />
<Box className="text" >Step 1 <br></br> About Your project</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<ul>
<li className="li" ><Typography noWrap>Aim and Objective</Typography></li>
<li className="li" >Community</li>
<li className="li" >Result and Impact</li>
</ul>
</Box>
</Box>
{/*step 2 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={step2} alt="step 2" className={classes.imageHover} />
<Box className="text">Step 2 <br></br> Group Discussion</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<Typography style={{textAlign:'center', marginTop:'16px'}} >Workshop guide for offline preparation</Typography>
</Box>
</Box>
{/*step 3 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} >
<Box className="mapHomeImage">
<img src={step3} alt="step 3" className={classes.imageHover}/>
<Box className="text" >Step 3 <br></br> Your story of change</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<ul>
<li className="li" ><Typography noWrap>Background setting</Typography></li>
<li className="li" >Timelines</li>
<li className="li" >Enablers & barriers</li>
</ul>
</Box>
</Box>
{/* Final step Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={finalStep} alt="final step" className={classes.imageHover} />
<Box className="text">Done!</Box>
</Box>
<Box
className="hide"
>
<Typography style={{textAlign:'center', marginTop:'16px'}} >A visual ‘story of change’ and a textual project narrative</Typography>
</Box>
</Box>
</Grid>
<Grid order='1' item xs className={classes.frame188}>
<Box className={classes.frame597}>
<Typography className={classes.frame597info1}>
Good to have before you start!
</Typography>
<Typography className={classes.frame597info2}>
In this section you’ll get an introduction to Theory of Change. It would be helpful if you had the following:
</Typography>
</Box>
<Box className={classes.frame331}>
<FormControl
required
error={error1}
component="fieldset"
variant="standard"
>
<FormGroup>
<FormControlLabel
style={{display:'table', marginBottom:'16px'}}
control={
<div style={{display:'table-cell'}}>
<CustomColorCheckbox
value={checked1}
onChange={handleChange}
name="checked1"
color="#24243F"
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
style={{transform: "scale(1.5)"}}
required
/>
</div>
}
label={
<Box ml={2} className={classes.frame213}>
<Typography
variant="body"
style={{color:"#24243F", fontSize:"16px",lineHeight:'24px', fontWeight:"bold"}}
>
A basic overview of your project
</Typography>
<FormHelperText variant='body' style={{fontSize:"16px",lineHeight:'24px',}}>
What is your project about? Who is it trying to help and why? Knowing just the basics about your project is good enough.
</FormHelperText>
</Box>
}
/>
</FormGroup>
</FormControl>
<FormControl
required
error={error2}
component="fieldset"
variant="standard"
>
<FormGroup>
<FormControlLabel
style={{display:'table', marginBottom:'32px'}}
control={
<div style={{display:'table-cell'}}>
<CustomColorCheckbox
value={checked2}
onChange={handleChange}
name="checked2"
color="#24243F"
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
style={{transform: "scale(1.5)"}}
required
/>
</div>
}
label={
<Box ml={2} className={classes.frame213}>
<Typography
variant="body"
style={{color:"#24243F", fontSize:"16px",lineHeight:'24px', fontWeight:"bold"}}
>
Time for offline activities
</Typography>
<FormHelperText variant='body' style={{ fontSize:"16px",lineHeight:'24px'}}>
You will need some time to have discussions with your target audience or project team members.
</FormHelperText>
</Box>
}
/>
</FormGroup>
</FormControl>
</Box>
<Button variant="contained" className={classes.frame188button} disabled={!(checked1 && checked2)} component={Link} to="/Main/MapItStep1">
Let's go!
</Button>
</Grid>
</Grid>
</Grid>
</Container>
</div>
);
}
我已将此 MapHome.js 作为 Route 包装在主文件 Main.js 中：
import '../../App.css';
import MainHeader from '../Header/MainHeader.js'
import MainFooter from '../Footer/MainFooter.js'
import { BrowserRouter as Router,Route, Switch,useRouteMatch } from 'react-router-dom';
import MapHome from '../MapIt/MapHome.js';
import TrackHome from '../TrackIt/TrackHome.js';
import TellHome from '../TellIt/TellHome.js';
import Overview from './Overview.js';
import Contact from '../ContactUs/Contact.js'
import Terms from '../Privacy/Terms.js';
import Privacy from '../Privacy/Privacy.js';
import LandingHome from '../Landing/LandingHome.js';
import ScrollToTop from '../ScrollToTop';
import MapItStep1 from "../MapIt/MapStep1.js";
function Main() {
const { path } = useRouteMatch();
return (
<Router >
<ScrollToTop />
<Switch>
<div className='mainApp'>
<MainHeader/>
<div className="mainContent" >
<Route exact path={`${path}/`} component={Overview}/>
<Route exact path={`${path}/MapHome`} component={MapHome}/>
<Route exact path={`${path}/MapItStep1`} component={MapItStep1}/>
<Route exact path={`${path}/TrackHome`} component={TrackHome}/>
<Route exact path={`${path}/TellHome`} component={TellHome}/>
<Route exact path={`${path}/Contact`} component={Contact}/>
<Route exact path={`${path}/Terms`} component={Terms}/>
<Route exact path={`${path}/Privacy`} component={Privacy}/>
<Route exact path='/Landing' component={LandingHome}/>
</div>
<MainFooter/>
</div>
</Switch>
</Router>
);
};
export default Main;
下面是我的App.css文件：
.App {
display: flex;
flex-direction: column;
background: #fbf9f8;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 100%;
width: 100%;
overflow-x: visible;
overflow-y: auto;
}
.mainApp {
display: flex;
flex-direction: column;
background: white;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 100%;
width: 100%;
overflow-x: visible;
overflow-y: auto;
align-items: center;
},
.mainContent {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
position: relative;
align-items: flex-start;
min-height: 100%;
background: white;
overflow-x: visible;
overflow: auto;
max-width: 1440px;
width: 100%;
}
Main 中包含的所有其他组件看起来都不错。谁能帮我解决这个问题吗？
我发现了这个问题，因为问题出在定义的 3 个向量溢出页面之外。我调整了这些向量的边距，问题就解决了。