領域に入ったらscrollByを発火したい(Javascript)

前提・実現したいこと

ある程度スクロールを行ったら、自動で100vhスクロールされる機能を実装したいです。

下記で.section02の上から100pxスクロールしたら自動で100vhスクロール（スムーススクロール）をされるように実装を試みています。
（自動で.section03の100px地点までスクロールされる）

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        section {
10            height: 100vh;
11            width: 100%;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            font-size: 6em;
16        }
17
18        .section01 {
19            background-color: orange;
20        }
21
22        .section02 {
23            background-color: green;
24        }
25
26        .section03 {
27            background-color: yellow;
28        }
29    </style>
30</head>
31
32<body>
33    <section class="section01">
34        テキストテキストテキスト
35    </section>
36    <section class="section02">
37        このセクションの上から100pxまでスクロールしたらscrollBy発火
38    </section>
39    <section class="section03">
40        テキストテキストテキスト
41    </section>
42</body>
43
44</html>

Javascript
1function sample1() {
2  var height = $(window).height();
3  window.scrollBy(
4
5    {
6      behavior: "smooth",// スムーズスクロールにする
7      left: 0,	
8      top: height,	
9    }
10
11  );
12}

javascriptの初心者で、わからない点が多く申し訳ないのですが、
わかる方がいらっしゃいましたら、ご教授いただけますと嬉しいです。

どうぞよろしくお願い致します。

Lhankor_Mhy

2020/08/19 04:14

sample1関数を呼び出している部分のコードをご提示ください。

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

回答1件

ベストアンサー

Intersection Observerを使ってよければ、こんな感じではないでしょうか。
Intersection Observer API - Web API | MDN

js
1function sample1(e) {
2    if (!e[0].isIntersecting) return;
3    var height = $(window).height();
4    window.scrollBy(
5
6        {
7            behavior: "smooth",// スムーズスクロールにする
8            left: 0,
9            top: height,
10        }
11
12    );
13}
14let observer = new IntersectionObserver( sample1, { rootMargin: "0px 0px -100px 0px" } );
15observer.observe( document.getElementsByClassName('section02')[0] );