Custom Scrollbar 만들기

● 화면 미리보기

● 코드 작성

※ lwc027CustomScrollbar.html

<template>
    <div class="wrapper">
        <div class="test-wrap">
            <template for:each={testData} for:item="item" for:index="index">
                <p key={item} class="bg-one">&nbsp;</p>
                <p key={item} class="bg-two">&nbsp;</p>
                <p key={item} class="bg-three">&nbsp;</p>
            </template>
        </div>
    </div>
</template>

※ lwc027CustomScrollbar.js

import { LightningElement, track} from 'lwc';

export default class Lwc027CustomScrollbar extends LightningElement {
    @track testData = [];
    connectedCallback(){
        for(let i = 0; i <10; i++){
            this.testData.push(i+'번째입니다');
        }
    }
}

※ lwc027CustomScrollbar.css

.wrapper{
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
    background-color: #f1f1f2;
    border-radius: 5px;
    min-height: 100px;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
    
    max-height: 200px;
    overflow-y: overlay;
}
.wrapper::-webkit-scrollbar {
    width: 10px;
}
.wrapper::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: rgb(0 0 0 / 20%);
    border: 2px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

.test-wrap p{
    display: block;
    width: 100%;
    margin: 0;
}
.bg-one{ background-color: #FFF;}
.bg-two{ background-color: #bec1cf;}
.bg-three{ background-color: #868a9b;}

● 화면 확인

● 참고

CSS 속성 의 overlay값은 overflow공간을 차지하지 않고 콘텐츠 상단에 스크롤바가 나타나도록 하는 비표준 값입니다. 이 값은 더 이상 사용되지 않으며 관련 기능이 속성으로 표준화 되고 scrollbar-gutter있습니다 .
CSS overflow: overlay

코드 참고 : 투명한 scroll 바 (스크롤바) 만들기 : overflow - overlay