개요

세로 스크롤(마우스 휠)하면 페이지가 옆으로 전환되는 구성 요소를 구현합니다.



스타일링에는 emotion/css(CSS in JS)를 사용합니다.

구현

구현의 이미지도입니다. 주요 CSS 속성을 설명합니다.

import React, { useEffect, useRef, VFC } from 'react';
import { css } from '@emotion/css';

export const ParallaxHorizontalScrollPage: VFC = () => {
    const screenRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        screenRef.current!.onwheel = ev => {
            ev.preventDefault()

            let delta = (ev.deltaY / Math.abs(ev.deltaY)) * window.innerWidth
            if (delta > 0) {
                delta += screenRef.current!.scrollLeft
                delta = Math.floor(delta / window.innerWidth) * window.innerWidth
            } else {
                delta += screenRef.current!.scrollLeft
                delta = Math.ceil(delta / window.innerWidth) * window.innerWidth
            }
            screenRef.current!.scrollLeft = delta
        }
    }, [])

    return (
        <div ref={screenRef} className={styles.screen}>
            <div className={styles.container}>
                <div className={styles.page('#0085d1')}>
                    <div className={styles.text}>Page 1</div>
                </div>
                <div className={styles.page('#db0063')}>
                    <div className={styles.text}>Page 2</div>
                </div>
                <div className={styles.page('#ffcd43')}>
                    <div className={styles.text}>Page 3</div>
                </div>
            </div>
        </div>
    )
}

const styles = {
    screen: css`
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        scroll-behavior: smooth;
    `,
    container: css`
        width: 300vw;
        height: 100%;
        display: flex;
    `,
    page: (bgColor: string) => css`
        position: relative;
        width: 100vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: ${bgColor};
    `,
    text: css`
        font-size: 3rem;
        color: white;
    `
}

useEffect에서 screen (CSS 이름의 div 요소)에 대한 스크롤 량을 조정합니다.

델타는 가로 스크롤 량으로 한 세로 스크롤로 화면 너비 (innerWidth)만큼 가로 스크롤합니다.
세로의 스크롤량을 절대치로 ​​나누는 것으로, +/-를 취득하고 있습니다.

let delta = (ev.deltaY / Math.abs(ev.deltaY)) * window.innerWidth

아래 코드는 페이지를 중간에 수동으로 가로 스크롤하는 동안 세로 스크롤을 할 때 가로 스크롤 량을 결정합니다.
이렇게하면 데모 (기사 상단의 GIF)와 같은 동작이됩니다.

if (delta > 0) {
    delta += screenRef.current!.scrollLeft
    delta = Math.floor(delta / window.innerWidth) * window.innerWidth
} else {
    delta += screenRef.current!.scrollLeft
    delta = Math.ceil(delta / window.innerWidth) * window.innerWidth
}