スクロール時に縦スクロールから横スクロールに切り替える方法【HTML/CSS/JS】

Webサイトを閲覧していると、特定のセクションでスクロールが縦方向から横方向に切り替わるような演出を見かけることがあります。このようなエフェクトは、ユーザーの目を引き、インタラクティブな体験を提供するのに役立ちます。

本記事では、HTML・CSS・JavaScriptを使用してこの効果を実装する方法を解説します。

縦スクロールから横スクロールに切り替わる仕組み
HTMLとCSSの基本構造
JavaScriptでスクロール制御
さらに高度なカスタマイズ
まとめ

縦スクロールから横スクロールに切り替わる仕組み

このエフェクトの基本的な仕組みは、次のようになります。

通常のページは縦スクロールで動く
特定のセクション（例：「私たちの仕事」）に到達すると、縦スクロールを一時的に停止
そのセクション内では、スクロールが横方向に移動するように変更
横スクロールが終わると、再び縦スクロールに戻る

この実装には、CSSのoverflowプロパティとJavaScriptのscrollイベントを活用します。

HTMLとCSSの基本構造

まず、縦スクロールと横スクロールのレイアウトを作成します。

<div class="wrapper">
    <section class="vertical">
        <h2>通常の縦スクロールセクション</h2>
    </section>
    <section class="horizontal-container">
        <div class="horizontal">
            <div class="item">コンテンツ1</div>
            <div class="item">コンテンツ2</div>
            <div class="item">コンテンツ3</div>
        </div>
    </section>
    <section class="vertical">
        <h2>再び縦スクロールへ</h2>
    </section>
</div>

次に、CSSでレイアウトを調整します。

body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.vertical {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}
.horizontal-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}
.horizontal {
    display: flex;
    width: 300vw;
    height: 100vh;
    transition: transform 0.5s;
}
.item {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: lightblue;
}

JavaScriptでスクロール制御

JavaScriptを使用して、スクロールが特定のセクションで横スクロールに切り替わるようにします。

document.addEventListener("DOMContentLoaded", function() {
    let horizontalSection = document.querySelector(".horizontal-container");
    let horizontalContent = document.querySelector(".horizontal");
    let scrollPosition = 0;

    window.addEventListener("scroll", function() {
        let rect = horizontalSection.getBoundingClientRect();
        if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
            let scrollAmount = window.scrollY - scrollPosition;
            horizontalContent.style.transform = `translateX(${-scrollAmount}px)`;
            window.scrollTo(0, scrollPosition);
        } else {
            scrollPosition = window.scrollY;
        }
    });
});

このスクリプトでは、特定のセクションに入ったときに、縦スクロールを抑制し、横スクロールに変換しています。