Svelte3 나란히 만든 메뉴!

이런 느낌의 흔한 가로줄 메뉴를 Svelte로 만들고 싶어요!
그리고 화면이 넘어간 부분도 가로로 스크롤할 수 있다!
그래서 나는 당시의 실복을 적어 두었다.

목록 탭을 가로로 배열 & 스크롤 가능

우선 나란히 메뉴 만들기 & 가로 스크롤 실현.
스크롤 막대 숨기기
Chrome/safari 이외의 브라우저 등
그나저나 overflow-x: hidden;가 지정되면 Sylow Bar는 사라지지만 가로로 스크롤할 수도 없습니다!!!
이렇게 되면

<div class="menu">
    <ul>
        {#each menus as menu}
            <li>{menu}</li>
        {/each}
    </ul>
</div>

<script>
    const menus = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
</script>

<style>
    .menu {
        width: 100%;
    }
    ul {
        padding: 0;
        /* 先頭に表示される"・"を消す */
        list-style: none;
        /* 左右の表示領域からあふれる時にスクロールバーを表示する */
        overflow-x: auto;
        /* 横並びにした時に返しを行わせない */
        white-space: nowrap;
    }
    /* スクロールバーを非表示にする */
    ul::-webkit-scrollbar {
        display: none;
    }
    li {
        /* リストを横並びにする */
        display: inline-block;

        /* 見た目整える用 */
        width: 100px;
        height: 50px;
        background: #fa8072;
        margin-right: 5px;
    }
</style>

이렇게 된 느낌!

클릭한 메뉴 스타일 변경하기

나는 클릭의 요소를 이해하도록 스타일을 바꾸고 싶다.이때의 실복.class:focus={pos === i}처럼 기술합니다.pos === i 조건이 충족된 경우에만 focusclass를 추가할 수 있습니다.
클릭할 때 추가하고 싶은 스타일을 추가하면 클릭 요소의 외관을 바꿀 수 있습니다.
이렇게 되면

<div class="menu">
    <ul>
        {#each menus as menu, i}
            <li class:focus={pos === i} on:click={() => pos = i}>{menu}</li>
        {/each}
    </ul>
</div>

<script>
    let pos;
    const menus = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
</script>

<style>
    .menu {
        width: 100%;
    }
    ul {
        padding: 0;
        /* 先頭に表示される"・"を消す */
        list-style: none;
        /* 左右の表示領域からあふれる時にスクロールバーを表示する */
        overflow-x: auto;
        /* 横並びにした時に返しを行わせない */
        white-space: nowrap;
    }
    /* スクロールバーを非表示にする */
    ul::-webkit-scrollbar {
        display: none;
    }
    li {
        /* リストを横並びにする */
        display: inline-block;

        /* 見た目整える用 */
        width: 100px;
        height: 50px;
        background: #fa8072;
        margin-right: 5px;
    }
    /* クリックされた要素のスタイル */
    .focus {
        background: #87ceeb;
    }
</style>

이렇게 된 느낌!

클릭할 때 괜찮은 곳으로 메뉴를 스크롤합니다

못 보는 메뉴를 눌렀을 때 계속 못 봐서 불편했어요.
클릭한 메뉴를 괜찮은 곳으로 스크롤하고 싶어요!이때의 실복.
l 탭에 l을 조작할 수 있는 DOM 요소를 추가합니다.bind:this={menu}에서 수평 스크롤 위치를 지정하면 l 탭의 임의의 위치로 스크롤할 수 있습니다.
이렇게 되면

<div class="menu">
    <ul bind:this={menu}>
        {#each menus as menu, i}
            <li class:focus={pos === i} on:click={() => onClickMenu(i)}>{menu}</li>
        {/each}
    </ul>
</div>

<script>
    let pos;
    let menu;
    const menus = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];

    const onClickMenu = i => {
        pos = i;
        menu.scrollTo({
            top: 0,
            left: 80 * i,
            behavior: 'smooth',
        })
    };
</script>

<style>
    .menu {
        width: 100%;
    }
    ul {
        padding: 0;
        /* 先頭に表示される"・"を消す */
        list-style: none;
        /* 左右の表示領域からあふれる時にスクロールバーを表示する */
        overflow-x: auto;
        /* 横並びにした時に返しを行わせない */
        white-space: nowrap;
    }
    /* スクロールバーを非表示にする */
    ul::-webkit-scrollbar {
        display: none;
    }
    li {
        /* リストを横並びにする */
        display: inline-block;

        /* 見た目整える用 */
        width: 100px;
        height: 50px;
        background: #fa8072;
        margin-right: 5px;
    }
    /* クリックされた要素のスタイル */
    .focus {
        background: #87ceeb;
    }
</style>

이렇게 된 느낌!!

this를 사용할 때 주의해야 할 일

scrollTo 변수bind:this={menu}의 값은 menu입니다. 구성 요소가 마운트되기 전에 아래의 실시 방식이 잘못된 경우undefined 또는 onMount()에서 사용하는 함수에 사용해야 합니다.

<div class="menu">
    <ul bind:this={menu}>
        {#each menus as menu, i}
            <li class:focus={pos === i} on:click={() => onClickMenu(i)}>{menu}</li>
        {/each}
    </ul>
</div>

<script>
  let menu;
  menu.scrollTo({
    top: 0,
    left: 50 * i,
    behavior: 'smooth',
  })
</script>

끝맺다

괜찮은 가로 스크롤 메뉴가 생겼어요!!!