ページを横にスクロールさせる（HTML、JavaScript）

bata

2021.11.22

コーディング

INDEX

横スクロールについて

ブラウザは縦にスクロールしますが、javascriptを使って横にスクロールしているように見せることが出来ます。
縦スクロールと横スクロールを組み合わせれば、ページにメリハリをつけることが出来ます。
当ページでは、横スクロールのデモとその実装方法を掲載しております。

デモページ

デモページはこちらです。
デモページ

実装方法

デモページのソースについて解説します。下記ぺージを参考にしています。
Horizontal snapping sections (simple) - ScrollTrigger

準備

GSAP（GreenSock社が開発しているJavaScriptライブラリ）を利用します。
こちらからダウンロード出来ます。
GSAP Installation

2つのファイルを読み込みます。

<script src="./umd/gsap.js"></script>
<script src="./umd/ScrollTrigger.js"></script>

HTML

横スクロールさせる部分は、横並びにする必要があるので囲っています。

<div class="item item01"><span>1</span></div>
<div class="item item02"><span>2</span></div>
<div class="item item03"><span>3</span></div>

<div class="area js-area">
  <div class="wrap js-wrap">
    <div class="item item04 js-item"><span>4</span></div>
    <div class="item item05 js-item"><span>5</span></div>
    <div class="item item06 js-item"><span>6</span></div>
  </div>
</div>

<div class="item item01"><span>7</span></div>
<div class="item item02"><span>8</span></div>
<div class="item item03"><span>9</span></div>

CSS

横スクロールさせる部分は、はみ出ても見えないようして、Flexboxで横並びにします。

.area{
  overflow: hidden;
}
.wrap{
  display: flex;
}
.item{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}
.item01{ background: #e94d15; }
.item02{ background: #f18d1d; }
.item03{ background: #f8b633; }
.item04{ background: #8cc561; }
.item05{ background: #56aa59; }
.item06{ background: #3d6b35; }

JavaScript

要素の数に合わせて横幅を指定
↓
トリガーが画面の一番上まできたら開始
↓
その位置に固定
スクロール量に応じて横に動かす
↓
開始位置から1000pxスクロールしたら終了

window.addEventListener("load", function(){

  //プラグインを定義
  gsap.registerPlugin(ScrollTrigger);

  const area  = document.querySelector(".js-area");
  const wrap  = document.querySelector(".js-wrap");
  const items = document.querySelectorAll(".js-item");
  const num   = items.length;

  //横幅を指定
  gsap.set(wrap,  { width: num * 100 + "%" });
  gsap.set(items, { width: 100 / num + "%" });

  gsap.to(items, {
    xPercent: -100 * ( num - 1 ), //x方向に移動させる
    ease: "none",
    scrollTrigger: {
      trigger: area, //トリガー
      start: "top top", //開始位置
      end: "+=1000", //終了位置
      pin: true, //ピン留め
      scrub: true, //スクロール量に応じて動かす
    }
  });
});