快速滚动 css 不工作。我已经用尽了所有资源，但我无法说出哪里出了问题。可能与 react/gatsby 有关

Question

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

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>
  ) 
}

全局样式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;
  }
}

Answer 1

您的 .homeblocks-container div 应该包装块组而不是每个 HomeBlocks 组件。
此外，同样的 .homeblocks-container div 具有宽度和高度的百分比值。您需要确保它的直接父级（可能不是 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>

快速滚动 css 不工作。我已经用尽了所有资源，但我无法说出哪里出了问题。可能与 react/gatsby 有关

snap-scroll css not working. Ive exhausted all recourses and im not able to tell whats wrong. maybe has to do with react/gatsby

css

styles

sass

less

reactjs