[Quasar] Table scrollbar style 입히기| Table 스크롤 | Table Header Scroll 안되게 하려면

Quasar로 Table을 만들고 Quasar Scrollbar를 적용하려고

Scroll Area를 적용했더니 Table Header 까지 Scroll 되는 문제가 발생했다

 

 

해결방법은 Scroll Area를 사용하지 않고 app.scss에 직접 Scroll CSS 를 추가해주면 된다.

/* 스크롤바의 폭 너비 */
::-webkit-scrollbar { /* ← 이게 있어야 Scrollbar CSS가 먹는다 */
    width: 10px;  /* 세로 스크롤바의 크기 */
    height : 10px; /* 가로 스크롤바의 크기 */ 
}

::-webkit-scrollbar-thumb {
    background: rgba(220, 20, 60); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
    background-clip:padding box;
    border: 2px solid rgba(220, 20, 60, .1);
}

::-webkit-scrollbar-track {
    background: rgba(220, 20, 60, .1);  /*스크롤바 뒷 배경 색상*/
}

/*  상하+좌우 스크롤이 만나는 우측 하단의 코너 부분   */
::-webkit-scrollbar-corner {
	background: transparent;
}

또, 스크롤바 디자인할때 스크롤바와 스크롤바 배경 사이에 padding을 넣어 디자인 하고 싶을땐

스크롤바에는 padding을 줄 수 없음으로 -webkit-scrollbar-thumb 안에 background-clip:padding box; 를 준 후,

보더값을 통해 공간이 생긴 것 처럼 연출할 수 있다.