快速滚动css不工作.我用尽了所有的资源，也说不出哪里出了问题.可能与react/gatsby有关

Question

我无法正常工作。我真的不知道我做错了什么。我用捕捉类型样式设置了捕捉开始和父容器。在这个项目中，我目前正在使用react、gatsby和scs。。这是我的代码：

index.js:

import React from "react"
import Layout from "../components/Layout"
import HomeBlocks from "../components/HomeBlocks"

export default function Home() {
return (
<Layout>
<HomeBlocks number={"1"} text={"1st Row"}></HomeBlocks>
<HomeBlocks number={"2"} text={"2nd Row"}></HomeBlocks>
<HomeBlocks number={"3"} text={"3rd Row"}></HomeBlocks>
</Layout>
)
}

块组件：

import React from "react"
export default function HomeBlocks(props) {
return (
<div className="homeblocks-container">
<div className={`homeblocks number${props.number}`}>
<h1>{props.text}</h1>
</div>
</div>
) 
}

全局样式表：

html,
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
// layout & navigation
.layout {
// navigation bar and footer code left out since its long.
}
.homeblocks-container {
width: 100%;
height: 100%;
scroll-snap-type: y mandatory;
overflow: scroll;
.homeblocks {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
.number1 {
background-color: red;
}
.number2 {
background-color: rgb(123, 255, 0);
}
.number3 {
background-color: blue;
}
}

Answer 1

1. 您的.homeblocks-containerdiv应该包装块组，而不是每个HomeBlocks组件
2. 此外，相同的.homeblocks-containerdiv具有宽度和高度的百分比值。您需要确保它的直接父级(可能不是body；在下面的代码段中，它是#root(也覆盖了整个视口，以便代码工作

function HomeBlocks(props) {
return (
<div className={`homeblocks number${props.number}`}>
<h1>{props.text}</h1>
</div>
) 
}
function Layout(props) {
return (
<div className="homeblocks-container">
{props.children}
</div>
)
}
function Home() {
return (
<Layout>
<HomeBlocks number={"1"} text={"1st Row"}></HomeBlocks>
<HomeBlocks number={"2"} text={"2nd Row"}></HomeBlocks>
<HomeBlocks number={"3"} text={"3rd Row"}></HomeBlocks>
</Layout>
)
}
ReactDOM.render(
<Home />,
document.getElementById('root')
);

html,
body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
#root {
width: 100%;
height: 100%;
}
.homeblocks-container {
width: 100%;
height: 100%;
scroll-snap-type: y mandatory;
overflow: scroll;
}
.homeblocks-container .homeblocks {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
.homeblocks-container .number1 {
background-color: red;
}
.homeblocks-container .number2 {
background-color: rgb(123, 255, 0);
}
.homeblocks-container .number3 {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>