I'm having trouble getting this to work properly. I can't figure out what I'm doing wrong. I've set the snap start and parent container with snap type styling in my current project using react, gatsby, and scss. Here is my code:
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>
)
}
block component:
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>
)
}
global style sheet:
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;
}
}