Javascriptの同期処理の方法をご教授いただきたいです。PromiseやCallbackに関しての質問です。

前提

JavasScript初学者です。
同期処理に関して質問があります。

実現したいこと

ここに実現したいことを箇条書きで書いてください
以下、一連の動きを実現させたいです。

１．該当ページのローディング
２．"id=js-field01Target"の要素まで画面スクロール
３．"id=js-menuFixed "の要素に".js-show"というクラスを付与

発生している問題・エラーメッセージ

同期処理させる記述のであるpromiseを使用したのですが、正常に動いてくれません。
具体的には以下の動きをしました。

「"id=js-menuFixed "の要素」が一瞬表示された後、非表示になり、
画面が「"id=js-field01Target"の要素」まで画面スクロールする。

該当のソースコード

JavasScript

const field01Target = document.getElementById('field01Target');
const menuFixed = document.getElementById('js-menuFixed');

const promise = new Promise((resolve, reject) => {
  window.addEventListener('load', function () {
    const rect = field01Target.getBoundingClientRect().top;
    const offset = window.pageYOffset;
    const gap = 90;
    const target = rect + offset - gap;
    window.scrollTo({
      top: target,
      behavior: 'smooth',
    });
  });
  resolve();
});

promise.then(() => {
  menuFixed.classList.add('js-show');
});

試したこと

promiseではなく、基本のコールバック関数を使用しました。
その場合、またしても期待通りの動きはしませんでした。
具体的な以下のような動きです。

画面が一瞬スクロールされた後、画面は初期位置に戻り、
「"id=js-menuFixed "の要素」が表示される。

補足情報（FW/ツールのバージョンなど）

コールバック関数使用時の記述です。

function scrollDown(callback) {
  const rect = field01Target.getBoundingClientRect().top;
  const offset = window.pageYOffset;
  const gap = 90;
  const target = rect + offset - gap;
  window.scrollTo({
    top: target,
    behavior: 'smooth',
  });
  callback();
}

scrollDown(function () {
  menuFixed.classList.add('js-show');
});

yambejp

2022/11/18 01:05

ロードされたらスクロールしてクラスを付加したいと言うだけでしょうか？ promiseを利用する意図はなんでしょうか？普通に同期処理で十分では？

kamkuzira

2022/11/18 01:25

> ロードされたらスクロールしてクラスを付加したいと言うだけでしょうか？はい、その動きを実現したいです。 >promiseを利用する意図はなんでしょうか？同期処理をさせるための方法を検索した際、「"promise"が良い方法だ」と説明しているサイトを見つけたからです。深い意味はございません。 yambejp様の仰るようなシンプルな同期処理方法があればご教授いただきたいです。

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

回答1件

ベストアンサー

てきとうに

javascript
1<style>
2.dummy{
3  background-Color:gray;
4  height:80%;
5}
6.active{
7  background-Color:yellow !important;
8}
9</style>
10<script>
11window.addEventListener('DOMContentLoaded', ()=>{
12  hoge.scrollIntoView({behavior:'smooth'});
13});
14window.addEventListener('scroll', ()=>{
15  if(hoge.getBoundingClientRect().top<1){
16    fuga.classList.add('active');
17  }
18});
19
20</script>
21<div class="dummy"></div>
22a
23<div class="dummy"></div>
24<span id="hoge">b</span>
25<div class="dummy" id="fuga"></div>
26c
27<div class="dummy"></div>