Home>
<body>
  <main>
       
       
       
  </main>
</body>
* {
  padding: 0;
  margin: 0;
}
.a, .b, .c {
  width: 100vw;
  height: 100vh;
}
.a {
  background-color: # f00;
}
.b {
  background-color: # 0f0;
}
.c {
  background-color: # 00f;
}
$(function () {
      $(window) .scroll (function () {
        $('.content'). each (function () {
          var elemPos = $(this) .offset (). Top;
          var scroll = $(window) .scrollTop ();
          var windowHeight = $(window) .height ();
          if (scroll>elemPos --windowHeight + 200) {
            $('.content'). removeClass ('scrollin');
            $(this) .addClass ('scrollin');
            var scrollin_h = $(".scrollin"). height ();
            console.log (scrollin_h);
          }
          console.log (elemPos)
          console.log (scroll)
          console.log (windowHeight)
          // If this is left as it is, the scroll will be rigid with "a".
          // I want to raise an event every time I scroll through this description below
          // Go to the next scrollin Go to the next scrollin Scroll with offsetTop
          // Should I animate the following every time I scroll and scroll → animate fire?
          if (windowHeight + scroll>scrollin_h) {
            $("html, body"). animate ({scrollTop: $(".scrollin")}, "swing");
          };
        });
        setTimeout (function () {
          $(". Content"). removeClass ("scrollin");
        }, 3000);
      });
    });

Is it possible to make movements that meet each condition in if minutes?
Or is it a description that fires animate every time it is scrolled (I don't know the description)

I've been suffering from this behavior for the past month and I'm completely stuck

I would like someone to tell me the solution
Thanks for your cooperation.

  • Answer # 1

    What would you like to do?

    * {
      padding: 0;
      margin: 0;
    }
    main {
      scroll-snap-type: y mandatory;/* added * /
      width: 100%;/* Modify * /
      height: 100vh;
      overflow-y: scroll;/* Add * /
    }
    .a, .b, .c {
      scroll-snap-align: start;/* Add * /
      width: 100%;
      height: 100vh;
    }
    .a {
      background-color: # f00;
    }
    .b {
      background-color: # 0f0;
    }
    .c {
      background-color: # 00f;
    }

    scroll-snap sample

    scroll-snap-type --CSS: Cascading Stylesheets | MDN

    Now it can be done with CSS only.

    If you have removed it, please warm it through.