Блог

Я не могу заставить это работать правильно. Я действительно понятия не имею, что я делаю не так. Я установил начало привязки и родительский контейнер со стилем типа привязки. в проекте я в настоящее время использую 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 amp; 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 должен охватывать группу блоков, а не каждый 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>