TIL 96일차

◆ 메세지 전송 시, 스크롤바 아래로 이동

◆ 모달창 스크롤바를 사용할 때, 페이지 스크롤바를 움직이지 않게 하기

• 모달창을 닫을 때, ~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); /* 호버시 스크롤바 색상 변경 */
	}