221122 TIL

 

!모달창 띄워져 있을 때 배경 스크롤 막는 코드 까먹지 말자!

const pageOpen = document.getElementById("pageBTN"); 
const pageModal = document.querySelector(".pageModal");
const pageClose = document.querySelector(".pageExit");

pageOpen.addEventListener("click", () => {
	pageModal.classList.remove("hidden");
	document.body.style.overflow = "hidden"; //모달창 오픈 시 배경 스크롤 비활성화
});
pageClose.addEventListener("click", () => {
    pageModal.classList.add("hidden");
    document.body.style.overflow = "unset"; //모달창 클로즈 시 배경 스크롤 활성화
});

 

스크롤바 css

적용 할 선택자::-webkit-scrollbar { // 스크롤바 전체 영역에 대한 설정
    width: 5px;
}

적용 할 선택자::-webkit-scrollbar-thumb { // 스크롤바 막대에 대한 설정
    background-color: #FFCCBC;
    border-radius: 20px;
}

적용 할 선택자::-webkit-scrollbar-track { // 스크롤바 배경에 대한 설정
    background-color: transparent;
    border-radius: 20px;
}

 

스크롤바 생성

가로축 overflow-x, 세로축 overflow-y, 모두: overflow

overflow : auto; // 하위 콘텐츠 길이가 컨테이너 길이를 초과했을 때 스크롤 자동 생성
overflow : hidden; // 하위 콘텐츠 길이가 컨테이너 길이를 초과하면 초과 부분을 숨김
overflow : scroll; // 하위 콘텐츠 길이에 상관없이 컨테이너에 스크롤바 생성
overflow : overlay // auto와 동일하게 동작하지만 스크롤바가 하위 콘텐츠 위에 덮어쓰임