スクロール方向で変わるUIの作り方【Scroll Direction UI】

🧭 Scroll Animationシリーズ

• #34 Scroll Spy UI
• #35 Scroll Sync UI
• #36 Scroll-Driven State UI
• #37 Scroll Time UI
• #38 Scroll Timeline

👉 今回はここから一歩進んで
「スクロール方向」に反応するUIを作ります

1.Scroll Direction UIとは？

通常のScroll UIは

• どこにいるか（position）
• どれくらい進んだか（progress）

で制御します

しかし今回は

👉 どっちに動いているか（direction）

スクロール位置で制御する基本パターンはこちら：

→ Scroll Trigger UI（#28）
→ Scroll Progress（#25）

2.できること

• 下スクロール → ヘッダーを隠す
• 上スクロール → ヘッダーを表示
• 上スクロール → ナビを復活
• 下スクロール → UIを最小化

👉 ユーザーの意図に合わせたUIになる

3.なぜ重要？

ユーザーは無意識にこう動きます

• 下スクロール → コンテンツを見る
• 上スクロール → 操作・戻る

つまり

方向 = 意図

4.完成イメージ

スクロール方向に応じて
ヘッダーが出たり消えたりするUIを作ります

• 下にスクロール → ヘッダーがスッと消える
• 上にスクロール → ヘッダーが戻る

HTML

<header id="header">HEADER</header>

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

CSS

body {
  margin: 0;
  font-family: sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  padding-left: 20px;
  transition: transform 0.3s ease;
  z-index: 100;
}

main {
  padding-top: 60px;
}

section {
  height: 100vh;
  border-bottom: 1px solid #ddd;
}

JavaScript

let lastY = window.scrollY

const header = document.getElementById('header')

window.addEventListener('scroll', () => {
  const currentY = window.scrollY

  if (currentY > lastY) {
    // down
    header.style.transform = 'translateY(-100%)'
  } else {
    // up
    header.style.transform = 'translateY(0)'
  }

  lastY = currentY
})

5.ポイント解説

① 前回の位置を記録する

let lastY = window.scrollY

② 比較するだけで方向がわかる

currentY > lastY → 下
currentY < lastY → 上

③ transformで動かす

transform: translateY(-100%)

display:none はNG（アニメーションできない）

6.よくある失敗

❌ ガタガタする

👉 原因
微小なスクロールでも反応する

✔ 解決（しきい値）

const diff = currentY - lastY

if (Math.abs(diff) > 5) {
  if (diff > 0) {
    header.style.transform = 'translateY(-100%)'
  } else {
    header.style.transform = 'translateY(0)'
  }
}

7.応用アイデア

• フッター表示制御
• FAB（ボタン）の出し分け
• ナビの最小化
• モバイルUI最適化

状態でUIを制御する考え方は、こちらでも解説しています：

→ Scroll State UI（#31）

より複雑なスクロール制御をしたい場合はこちら：

→ Scroll Timeline（#38）

8.実験：ヘッダーの表示/非表示を体験する

スクロール方向に応じて、ヘッダーの表示・非表示が切り替わる挙動を確認します。
下にスクロールするとヘッダーは隠れ、上にスクロールすると再び表示されます。

この挙動は、ユーザーの「閲覧」と「操作」の意図に合わせてUIを変化させる代表的なパターンです。

観察ポイント

• ゆっくりスクロールしたときの挙動
• 素早くスクロールしたときの反応
• 少しだけ上下に動かしたときにガタつかないか
• ページ上部に戻ったときの安定性

スクロール方向は「現在位置」と「前回位置」の差分だけで判定できます。
小さな揺れを防ぐために、しきい値（threshold）を入れるのがポイントです。

9.まとめ

Scroll UIはこれまで「位置」によって制御するのが基本でした。

しかし今回のように、
「方向」によってUIを変えることで
ユーザーの行動に合わせた設計が可能になります。

• 下スクロール → コンテンツに集中させる
• 上スクロール → 操作しやすくする

このように、
スクロールの向きはユーザーの意図そのものです。

実装自体はシンプルですが、
体験としては大きく変わります。

👉 Scroll UIは「どこにいるか」だけでなく
👉 「どう動いたか」まで扱うと一段レベルが上がる

まずはヘッダーの表示・非表示から試してみてください。
そこから、ナビゲーションやボタン制御へ応用していくことで、
より洗練されたUIを作ることができます。

Scroll Animationシリーズ

• #24 Scroll Reveal Animation
• #25 Scroll Progress
• #26 Scroll Snap Animation
• #27 Parallax Scroll Animation
• #28 Scroll Trigger Animation
• #29 Sticky Scroll Animation
• #30 Scroll Story UI
• #31 Scroll State Machine UI
• #32 Scroll Velocity Animation
• #33 Scroll Mouse Interaction UI
• #34 Scroll Spy UI
• #35 Scroll Sync UI
• #36 Scroll-Driven State UI
• #37 Scroll Time UI
• #38 Scroll Timeline UI
• #39 Scroll Direction UI