'Trying to use scroll snapping

So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)

If anyone can help, i would appreciate.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
    }

    html {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    }

    .container {
    position: relative;
    width: 100%;
    height: 100%;
    }

    .body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
    scroll-snap-align: start;
    }
    
    .home-1 {
    height: 100vh;
    width: 100%;
    background-color: #DBDBDB;
    display: flex;
    position: absolute;
    }  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/main.css" type="text/css">
    <title>Portfolio</title>
</head>
<body>

    <div class="container">

        <div class="home-1">
            <div class="menu">
                <p>Menu</p>
            </div>
            <div class="top-links">
                <a href="#" class="about-me">About Me</a>
                <a href="#" class="works">Works</a>
            </div>
            <div class="right-buttons">
                <li onclick="toggleLanguage('English')"><a href="#">En</a></li>
                <li onclick="toggleLanguage('Portuguese')"><a href="#">Pt</a></li>
            </div>
            <div class="logo-holder">
                <div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
            </div>
            <div class="bottom-links">
                <a href="#" class="about-me">Instagram</a>
                <a href="#" class="works">Behance</a>
            </div>
            <div class="email">
                <p>[email protected]</p>
            </div>
        </div>

        <div class="home-2">

        </div>

        <div class="home-3">
            
            <div class="row">

                <div class="column">
                    <h1>My name is <br>
                    Sabrina Carrard,<br>
                    I’m a graphic designer <br>
                    and passionate <br>
                    about creating <br>
                    things and animals. <br>
                    </h1>

                    <hr class="solid">

                    <p>Before we say goodbye, you can get in <br>
                    touch through my email in Portuguese, <br>
                    English and French (I’m learning that, <br>
                    so please, be kind). <br>
                    </p>
                </div>

                <div class="column-2">
                    <p>My formal education was in UTFPR, 
                    where I graduated in graphic design 
                    as well. I started to work still I was in
                    college, and worked with brands like
                    ONU, Abril, Red Balloon, Wise up, 
                    Porcelanosa, Medianeira, SEBRAE, 
                    Prata e Arte, Bel Pesce, Universidade 
                    do Intercâmbio e Casa Paraíso 
                    Ecológico. Today I like to consider 
                    myself as a brand and editorial 
                    designer, things I really enjoy 
                    while I’m working on. 
                    </p>
                    <p>I started to care about art when 
                    I was in school. At the time, I was 
                    obsessed with movies and used to 
                    watch four or five movies a day (but 
                    I was a fine student, I swear). After 
                    that I fell in love with art in 
                    my college days, especially art 
                    history. Today I’m very interested 
                    in the discussion between gender 
                    and art. Female artists, what they 
                    did and their stories, really caught me. 
                    </p>
                </div>

                <div class="column-3">
                    <p>
                        Besides animals, other thing that
                        is really important to know is that
                        I’m fascinated by books and
                        literature. I truly believed that
                        literature opened my eyes to
                        important questions such as
                        human rights and feminism.
                        So when I’m reading something,
                        usually they are novels related
                        to these subjects because it
                        is something that I care about
                    </p>
                </div>

              </div>
        </div>

        <div class="home-4">
            
        </div>

        <div class="home-5">
            
        </div>

        <div class="home-6">
            
            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
                </figure>

                <figure class="gallery__item gallery__item--5 ">
                    <img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
                </figure>

          </div>

        </div>

        <div class="home-7">
            
        </div>

        <div class="home-8">
            
        </div>

        <div class="home-9">

            <div class="gallery">

                <figure class="gallery__item gallery__item--1 ">
                    <img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
                </figure>

                <figure class="gallery__item gallery__item--2 ">
                    <img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
                </figure>

                <figure class="gallery__item gallery__item--3 ">
                    <img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
                </figure>

                <figure class="gallery__item gallery__item--4 ">
                    <img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
                </figure>

          </div>
            
        </div>

        <div class="home-10">

        </div>

    </div>
    
</body>
</html>
htmlcss


Solution 1:[1]

Problem

The following CSS ruleset is wrong:

.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
  scroll-snap-align: start;
}
  1. There's no class="body" in the HTML.
  2. The selector only targets .home-10. When you list more than one tag, class, etc., how each part is delimited is very important:
Selector Target Declaration
.A {space} .B .B Target each .B that is a descendant of an .A
.A , .B .A OR .B Target all .A and all .B
.A > .B .B Target each .B that is a direct descendant (child) of an .A
.A + .B .B Target each .B that is the very next sibling of an .A
.A ~ .B .B Target each .B that is a sibling that proceeds an .A
.A.B .A AND .B Target all tags that have class="A B"

So if your intention was to target each of those classes, you need to delimit them with a comma:

.home-1, .home-2, .home-3, .home-4, .home-5, .home-6, .home-7, .home-8, .home-9, .home-10 {
  scroll-snap-align: start;
}


@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght@300&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font: 2ch/1.25 Oswald;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: auto;
}

body {
  background: #DBDBDB;
}

h1,
h2,
h3,
h4,
legend,
.byline,
.title {
  font-family: Montserrat;
}

.byline {
  font-style: italic;
}

header,
section,
footer {
  padding: 10px 12px;
  background: #DBDBDB;
  scroll-snap-align: start;
}

header {
  margin: 0 0 20px 0;
  border-bottom: 3px inset grey;
}

section {
  min-height: 100vh;
}

footer {
  margin: 20px 0 0 0;
  border-top: 3px inset grey;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

menu {
  display: flex;
  justify-content: space-around;
  width: max-content;
  list-style: none;
  margin-left: 0;
}

.left,
.right {
  display: flex;
  align-items: center;
}

li {
  margin: 0 5px
}

p {
  margin-bottom: 5px;
}

.logo {
  max-width: 3rem;
}

.logo img {
  display: block;
  object-fit: contain;
  max-width: 3rem;
}

h1 {
  margin-bottom: 10px
}

h2 {
  margin-bottom: 5px
}

article {
  padding: 5px 8px 8px;
  flex: 1;
}

article:first-of-type {
  flex: 0.5;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  margin: 10px;
}

.title {
  margin-bottom: 0;
}

.gallery {
  scroll-snap-align: none;
}

.gallery figure {
  align-self: center;
  margin: 10px;
  scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="assets/css/main.css" rel="stylesheet">
  <title>Portfolio</title>
</head>

<body>
  <header>
    <h1>Sabrina Carrard</h1>
    <nav>
      <div class='left'>
        <p class='title'>Menu</p>
        <menu>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Works</a></li>
        </menu>
      </div>

      <div class='right'>
        <menu>
          <li><a href="#" class='en lang'>En</a></li>
          <li><a href='#' class='pt lang'>Pt</a></li>
        </menu>
        <figure class="logo">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"></figure>
      </div>
    </nav>
  </header>
  <main>
    <section class='page'>
      <div class="row">
        <article class='column'>
          <h2>My name is <br>Sabrina Carrard, </h2>
          <p class='byline'>I’m a graphic designer and passionate about creating things and animals.</p>
        </article>
        <article class="column">
          <p>My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce,
            Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.</p>
          <p>I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art
            history.
          </p>

        </article>

        <article class="column">
          <p>Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.</p>
          <p>Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something,
            usually they are novels related to these subjects because it is something that I care about.</p>
        </article>
      </div>
    </section>
    <section class="gallery">
      <div class='row'>
        <figure>
          <img src='https://placem.at/people?w=320&h=180&random=1&txt=1&txtclr=fc0' alt="">
        </figure>

        <figure>
          <img src="https://placem.at/places?w=320&h=180&random=1&txt=2&txtclr=fc0" alt="">
        </figure>
      </div>
      <div class='row'>
        <figure>
          <img src="https://placem.at/things?w=160&h=90&random=1&txt=3&txtclr=fc0" alt="">
        </figure>

        <figure>
          <img src="https://placem.at/things?w=160&h=90&random=1&txt=4&txtclr=fc0" alt="">
        </figure>

        <figure>
          <img src="https://placem.at/people?w=160&h=90&random=1&txt=5&txtclr=fc0" alt="">
        </figure>
      </div>
    </section>
    <section>
      <h3>Blank Section</h3>
    </section>
    <section class="gallery">
      <div class='row'>
        <figure>
          <img src='https://placem.at/things?w=480&h=270&random=1&txt=6&txtclr=fc0' alt="">
        </figure>
      </div>
      <div class='row'>
        <figure>
          <img src="https://placem.at/things?w=480&h=270&random=1&txt=7&txtclr=fc0" alt="">
        </figure>
      </div>
      <div class='row'>
        <figure>
          <img src="https://placem.at/places?w=720&h=405&random=1&txt=8&txtclr=fc0" alt="">
        </figure>
      </div>
      <div class='row'>
        <figure>
          <img src="https://placem.at/places?w=320&h=160&random=1&txt=10&txtclr=fc0
" alt="">
        </figure>

        <figure>
          <img src="https://placem.at/places?w=320&h=180&random=1&txt=11&txtclr=fc0
" alt="">
        </figure>
      </div>
    </section>

    <section>
      <h3>Blank Section</h3>
    </section>
  </main>
  <footer>
    <p>Before we say goodbye, you can get in touch through my <a href='emailto:[email protected]'>email</a> in Portuguese, English, and French (I’m learning that, so please, be kind).</p>
    <address>
Street<br/>
City, Province/State<br/>
Phone
</address>
  </footer>
  <script>
    /*Always put script right before the </body> end tag*/
  </script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions