I am facing issues with the snap-scroll CSS feature, despite trying everything I can think of. I'm at a loss as to what the problem could be, and I suspect

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

Answer №1

  1. Ensure that your .homeblocks-container div encloses the blocks group and not each individual HomeBlocks component.
  2. Additionally, make sure that the same .homeblocks-container div has a percentage value for its width and height. It is important that its immediate parent (which may not be body; in this case it is #root) covers the entire viewport for your code to function properly.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for merging conditional and data binding classes in AngularJS

In order to dynamically apply different classes based on expressions in your AngularJS templates, you can make use of the ng-class directive. Here is an example: <div ng-class="{'class1' : expression1, 'class2' : expression2}"> ...

NextJS Facing a Challenge with Webpack Module Federation in React Implementation

I need to run a react app within a NextJS host app as well as on its own. After reviewing the NextJS example at https://github.com/module-federation/module-federation-examples/tree/master/nextjs-react, I came across some important notes: NOTE: Omitting v ...

Encountering an error while updating data with react-hook-form

Struggling to configure a react-hook-form for create and update operations using material ui autocomplete and textfield. The issue arises with a field that has autocomplete functionality. When passing an input value, it displays correctly, but upon form s ...

There seems to be an issue with my React application that was built using Webpack 5 and compiled with TypeScript. The @tailwind directive is not functioning properly in the browser, and

As I embark on creating a fresh react application using Webpack 5, Tailwind CSS, and Typescript, I find myself at a crossroads. Despite piecing together various tutorials, I am struggling to configure the postcss-loader for Tailwind. While traditional .css ...

What is the best way to use multiple for loops in different columns within a flask template?

In my first column, the last link in my initial for loop leads to the header in the second column where another for loop is present. Oddly enough, the link for Broccoli also creates a hyperlink in the text Previous Ads, which is not intended. https://i.ss ...

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

Struggling to implement Bootstrap5 sticky footer template on a React JS application

Currently, I am attempting to incorporate the following template into my react.js application: Sticky footer Bootstrap 5 The structure in my application resembles this: https://i.sstatic.net/jXYPj.png There is only one additional div with an id of "root" ...

Is it possible to resize a Div using pure CSS?

Here is the HTML structure I am working with: <div class="outer"> <div class="inner"> <a href="#"/> <a href="#"/> <a href="#"/> </div> </div> This is the corresponding CSS: div.outer{ position:relative; ...

Ways to display and conceal menu depending on initial view and scrolling

On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

Updating parent data when new data is added in child component in React

I'm just starting to learn React and I've been reading a lot about updating children components when the parent component is updated, but I haven't come across much information about the opposite scenario. Currently, I have a parent compone ...

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

The components of my website shift and adjust as the size of the page is changed

I've been experimenting with different properties, but my CSS just won't stay in place. I've tried using absolute and fixed positioning, but without success. I want the elements to remain in their respective positions - the greeting on the l ...

Error: Attempting to access property 'error' of an undefined object resulted in an unhandled exception

I encountered an error when using the handleSubmit function in the Register component: Uncaught (in promise) TypeError: Cannot read property 'error' of undefined. Below, you can see the code for the component, how I fetch API data, and the Next. ...

The Fetch API seems to be having trouble loading the data from localhost:300

I am facing an issue with my express-js server that returns an array of data. I want to use the Fetch API to make a request and display this list on the screen. However, every time I try to make a request, I encounter an error stating "Fetch API cannot loa ...

Adjusting Flex-Basis for various screen sizes

I am perplexed as to why this is not functioning correctly. #parent { display: flex !important; flex-flow: row wrap; width: 100% !important; justify-content: flex-start; } .item{ flex: 1 !important; flex-basis: calc(100% / 4); box-sizing: border-bo ...

Spinning icons in React: A step-by-step guide

Currently, I am attempting to create a spinning icon using React, but it seems like I might be overlooking something in my approach. Here is the return function that I have: return ( <div className="loader"> <p>Loading Dat ...

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...