【WEBデザイン】コンテンツの横スクロールを実装したときのメモ

マウススクロールしたときにコンテンツが縦スクロールではなく横スクロールさせたときのメモ。
横スクロールコンテンツを構築することは滅多にないけれど、こういったのを実装したかったのです。

HTML

<div class="wrapper">
        <header>
            <h1>ヘッダー</h1>
        </header>
        <main>
            <div class="contents-container">
                <div class="introduction">
                    紹介エリア
                </div>
                <div class="contents">
                    <p>コンテンツ1</p>
                </div>
                <div class="contents">
                    <p>コンテンツ2</p>
                </div>
                <div class="contents">
                    <p>コンテンツ3</p>
                </div>
            </div>
        </main>
        <footer>
            <p>フッター</p>
        </footer>
    </div>

CSS

body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        header, footer {
            flex-shrink: 0;
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
            position: fixed;
            width: 100%;
            z-index: 10;
        }

        header {
            top: 0;
        }

        footer {
            bottom: 0;
        }

        main {
            display: flex;
            flex-grow: 1;
            margin-top: 60px;
            margin-bottom: 40px;
            overflow: hidden;
        }

        .contents-container {
            display: flex;
            width: 100vw;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .introduction, .contents {
            flex: 0 0 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .introduction {
            background-color: #e0e0e0;
        }

        .contents {
            background-color: #f8f8f8;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .contents a {
            text-decoration: none;
            color: #333;
            font-size: 24px;
        }

JavaScript

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const contentsContainer = document.querySelector('.contents-container');
            const sections = document.querySelectorAll('.introduction, .contents');
            let currentIndex = 0;
            const totalSections = sections.length;
            let scrollTimeout;
            let scrollDelta = 0;

            window.addEventListener('wheel', (e) => {
                e.preventDefault();
                scrollDelta += e.deltaY;
                clearTimeout(scrollTimeout);
                scrollTimeout = setTimeout(() => {
                    if (scrollDelta > 150) {
                        currentIndex = Math.min(currentIndex + 1, totalSections - 1);
                    } else if (scrollDelta < -150) {
                        currentIndex = Math.max(currentIndex - 1, 0);
                    }
                    contentsContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
                    scrollDelta = 0;
                }, 100);
            }, { passive: false });
        });
    </script>

マウススクロールが敏感で、すぐに次のコンテンツに移動してしまったので調整しました。

scrollTimeout = setTimeout(() => {
                    if (scrollDelta > 150) {
                        currentIndex = Math.min(currentIndex + 1, totalSections - 1);
                    } else if (scrollDelta < -150) {
                        currentIndex = Math.max(currentIndex - 1, 0);
                    }
                    contentsContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
                    scrollDelta = 0;
                }, 100);