◆ 모달창 스크롤바를 사용할 때, 페이지 스크롤바를 움직이지 않게 하기
- 모달창을 닫을 때, ~style.overflow="hidden"
- 모달창을 열 때, ~style.overflow="unset"
◆ 스크롤바
// 스크롤은 몇 % 위치에 있는가?를 알고 싶다면
// - 전체 문서의 높이(document.body.clientHeight)
// - 현재 스크롤의 위치 (window.scrollY)
// - 브라우저의 높이 (window.innerHeight)window.addEventListener("scroll", _.throttle(()=>{ const height = document.body.clientHeight - window.innerHeight; const current = window.scrollY const percent = (current / height) * 100 //console.log("percent = " + Math.round(percent)); //data의 percent를 계산된 값으로 갱신 this.percent = Math.round(percent); },250));
◆ 채팅방 목록 스크롤바 hover시 표시
.cardList-scroll{ overflow-y: hidden; -ms-overflow-style: none; } .cardList-scroll:hover { overflow-y: auto; } .cardList-scroll::-webkit-scrollbar { width: 6px; /* 스크롤바 너비 조절 */ background-color: transparent; /* 스크롤바 배경색 설정 */ } .cardList-scroll::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); /* 스크롤바 색상 설정 */ border-radius: 3px; /* 스크롤바 모서리 둥글기 설정 */ } .cardList-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.6); /* 호버시 스크롤바 색상 변경 */ }