スクロール(scroll)をある一定量ごとにanimateでscrollさせるべきですか？？

html
1  <body>
2
3    <main>
4      <div class="a content"></div>
5      <div class="b content"></div>
6      <div class="c content"></div>
7    </main>
8
9  </body>
10

css
1*{
2  padding: 0;
3  margin: 0;
4}
5.a,.b,.c{
6  width: 100vw;
7  height:100vh;
8}
9
10.a{
11  background-color: #f00;
12}
13.b{
14  background-color: #0f0;
15}
16.c{
17  background-color: #00f;
18}
19

js
1$(function(){
2      $(window).scroll(function (){
3        $('.content').each(function(){
4          var elemPos = $(this).offset().top;
5          var scroll = $(window).scrollTop();
6          var windowHeight = $(window).height();
7          if (scroll > elemPos - windowHeight + 200){
8            $('.content').removeClass('scrollin');
9            $(this).addClass('scrollin');
10            var scrollin_h = $(".scrollin").height();
11            console.log(scrollin_h);
12          }
13          console.log(elemPos)
14          console.log(scroll)
15          console.log(windowHeight)
16
17          // このままだと「a」でスクロールが硬直されてしまう
18          // 下記のこの記述をスクロールする度にイベントを起こしたい
19          // 次のscrollinへ次のscrollinへとoffsetTopでスクロールしてほしい
20          // スクロールする度に下記をanimate化しスクロール→animate発火にするべき？
21          if( windowHeight+scroll > scrollin_h ){
22            $("html,body").animate({scrollTop:$(".scrollin")},"swing");
23          };
24        });
25
26        setTimeout(function(){
27          $(".content").removeClass("scrollin");
28        },3000);
29      });
30    });
31

if分でそれぞれ条件に見合った動きにできるのか
それともscrollされる度にanimateを発火させる記述にするのか（その記述がわからない）

この挙動に関してここ1ヶ月苦しまれて完全に詰まってます

どなたか解決策を教えていただきたいです
何卒よろしくお願いします

m.ts10806

2020/09/18 22:52

そもそも何をしようとして、何を目指してのものなのか(ゴール、設計、要件)書かないとアドバイスしようがないかと思います

Lhankor_Mhy

2020/09/19 01:29 編集

3-3. 質問詳細の最初に実現したいことを書きましょう https://teratail.com/help/question-tips#questionTips3-3 表現するための言葉がわからない時は表現の仕方を工夫しましょう https://teratail.com/help/question-tips#questionTips3-3-1

行動規範の内容に同意します

回答1件

ベストアンサー

ご希望のことは下記のようなことでしょうか。

css
1*{
2  padding: 0;
3  margin: 0;
4}
5
6main {
7  scroll-snap-type: y mandatory; /* 追加 */
8  width:100%;  /* 修正 */
9  height:100vh;
10  overflow-y: scroll; /* 追加 */
11}
12
13.a,.b,.c{
14  scroll-snap-align: start; /* 追加 */
15  width: 100%;
16  height:100vh;
17}
18
19.a{
20  background-color: #f00;
21}
22.b{
23  background-color: #0f0;
24}
25.c{
26  background-color: #00f;
27}