snap-scroll css 不起作用我已经用尽了所有的资源，但我不知道出了什么问题也许与反应/盖茨比有关

问题描述

我无法正常工作。我真的不知道我做错了什么。我使用 snap 类型样式设置 snap 开始和父容器。在我目前正在使用 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>
  ) 
}

全局样式表：

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

解决方法

1. 您的 .homeblocks-container div 应该包裹 blocks 组而不是每个 HomeBlocks 组件。
2. 此外，相同的 .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>