!모달창 띄워져 있을 때 배경 스크롤 막는 코드 까먹지 말자!
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와 동일하게 동작하지만 스크롤바가 하위 콘텐츠 위에 덮어쓰임
'내배캠 4기 React - TIL' 카테고리의 다른 글
221124 TIL (0) | 2022.11.25 |
---|---|
221123 TIL (0) | 2022.11.23 |
221121 TIL (0) | 2022.11.21 |
221118 TIL (0) | 2022.11.21 |
221117 TIL (0) | 2022.11.17 |