스크롤 이동시키기 (1)

1. 단순 스크롤 이동시키기

1-1. html 코드

<template>
    <div class="cpHistory">
        <div class="full-img">
            <div class="txt-wrap">
                <h4>Our History</h4>
                <p>회사 소개가 들어갑니다.</p>
            </div>
            <div class="scroll-area">
                Scroll down <br />↓
            </div>
        </div>

        <div class="history-wrap">
            <!-- 연혁 메뉴 부분 -->
            <ul class="menu">
                <template for:each={historyList} for:item="item" for:index="index">
                    <li key={item.value} data-val={item.value} onclick={scrollToHistory} class="menu-title">
                            {item.title}
                    </li>
                </template>
            </ul>

            <!-- 연혁 부분 -->
            <ul class="history">
                <template for:each={historyList} for:item="item" for:index="index">
                    <li class="history-con" key={item.value} data-hcon={item.value}>
                        <div class="img-area"></div>
                        <div class="txt-area">
                            <h4>{item.title}</h4>
                            <p>{item.des}</p>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

1-2. js 코드

import { LightningElement, track } from 'lwc';
export default class CpHistory extends LightningElement {
    @track historyList = [
        {title : '2019', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2019'},
        {title : '2020', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2020'},
        {title : '2021', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2021'},
        {title : '2022', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2022'},
        {title : '2023', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2023'},
        {title : '2024', des : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', value : '2024'},
    ];

    connectedCallback(){
        window.addEventListener("scroll", (event) => {
            this.checkScroll();
        });
    }
    @track isFirstLender = true;
   
    scrollToHistory(e){
        let targetName = e.currentTarget.dataset.val;
        console.log('targetName : ', targetName);

        let el = this.template.querySelector(`[data-hcon="${targetName}"]`);
        console.log('el : ', el);
        // let menuEl = this.template.querySelector('.history-wrap .menu');
        // console.log('menuEl : ', menuEl.offsetHeight);
        // let x = el.offsetTop - menuEl.offsetHeight;
        // console.log('x : ', x);

        window.scrollTo({top: el.offsetTop, behavior:'smooth'});
        
    }


}

1-3. css 코드

/* full img */
.full-img {
    height: calc(100vh - 60px);
    background-color: #333;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 110px;
}

.full-img .txt-wrap h4 {
    color: #fff;
    font-size: 42px;
}

.full-img .txt-wrap p {
    color: #fff;
    text-align: center;
    padding-top: 16px;
    font-size: 18px;
}

.scroll-area {
    position: absolute;
    text-align: center;
    color: #fff;
    bottom: 30px;
    font-size: 18px;
    background-color: rgb(255 255 255 / 18%);
    padding: 10px 30px;
    border-radius: 5px;
}

/* menu */
.history-wrap{
    max-width: 1080px;
    margin: 0 auto 450px;
}
ul.menu {
	padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid #000;
    background-color: #fff;
}

ul.menu li {
    padding: 10px 15px;
    font-size: 22px;
    color: #666;
    cursor: pointer;
}
ul.menu li.is-active {
    font-weight: bold;
}
ul.menu li:hover {
    text-decoration: underline;
    color: #000;
}


ul.history .history-con:nth-child(2n) {
    flex-direction: row-reverse;
}

ul.history .history-con {
    display: flex;
    gap: 30px;
    align-items: center;
	padding: 20px;
    background-color: #f4f4f4;
	margin-top: 60px;
}

ul.history .history-con .img-area {
    width: 50%;
    background-color: #ddd;
    height: 700px;
}

ul.history {
	padding-top: 60px 0;
}

ul.history .history-con .txt-area h4 {
    font-size: 18px;
    padding-bottom: 10px;
}

1-4. 화면 확인

2. menu 따라오게 하기 + 바로 아래에 선택한 영역이 나오도록 하기

2-1. JS 수정

scrollToHistory(e){
        let targetName = e.currentTarget.dataset.val;
        console.log('targetName : ', targetName);

        let el = this.template.querySelector(`[data-hcon="${targetName}"]`);
        console.log('el : ', el);
        
        // 메뉴 영역만큼 스크롤 좀 더 내리기 추가
        let menuEl = this.template.querySelector('.history-wrap .menu');
        console.log('menuEl : ', menuEl.offsetHeight);
        let x = el.offsetTop - menuEl.offsetHeight;
        console.log('x : ', x);

        if(x > -1){
            window.scrollTo({top: x, behavior:'smooth'});
        }
        
    }

2-2. CSS 수정

ul.menu 부분만 수정했습니다. sticky 추가

ul.menu {
	padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid #000;
	position: sticky;
    top: 0;
    background-color: #fff;
}

2-3. 화면 확인