어제 각자 만든 섹션을 합치고 팀원 부분을 클릭했을 때 모달이 뜨게 하는 부분을 완성했었다.
문제는 모달창이 뜨고 나서 마우스 휠을 만지면 바깥창이 스크롤이 되고 있었다!
모달창 하나만 만들었을 때는 외부창이 없어서 이 부분까지는 생각을 못했는데 순간 까먹고 있던거다ㅜㅜ
완전 기본인데 까먹어버려서 다음에는 절대 안 잊으려고 반성의 TIL 쓰기..ㅎ
javascript로 모달창 외부 스크롤 막기
그동안은 제이쿼리로 웹사이트를 만들었는데 이번에는 자바스크립트로만!! 만들고 싶어서 욕심을 내보았다..ㅎㅎ
모달 창 뜨면 외부 스크롤 막기
function disableScroll() {
// 현재 페이지 스크롤 위치 가져오기
scrollTop = window.scrollY || document.documentElement.scrollTop;
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
// 스크롤을 시도하면 이전 값으로 설정
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}우선 모달 스크롤을 막는 함수를 생성했다.
scrollTop과 scrollLeft 변수에 scrollY, scrollX, scrollTop ,scrollLeft 값을 담아서 활용하고자 했다.
이렇게 하면 모달을 클릭한 시점의 화면 스크롤 위치를 가져올 수 있다.
스크롤 될 때 발생하는 함수 구문
window.onscroll = function() {};onscroll이벤트 핸들러를 사용해서 함수를 작성했다.
window.scrollTo(x_좌표, y_좌표);
//x_좌표 = scrollLeft , y_좌표 = scrollTopscrollTo(): 문서의 지정된 위치로 스크롤한다.
우리는 이미 scrollTop과 scrollLeft 에 각 좌표를 변수로 담았기 때문에 이를 활용해서 지정된 위치에 고정되게 만든것이다!
✅ 구현된 화면 보기
❌ 문제점 : 모달을 띄운 위치에서 외부창이 고정이 되었지만, 모달을 닫아도 그 위치에 계속 고정되어 있었다.
🔍 코드 다시 보기 : 스크롤 방지만 했고 닫았을 때의 스크롤을 어떻게 할 것인지는 설정해주지 않았다.
showModal() 이라는 함수는 멤버 사진을 클릭했을 때 모달창이 뜨도록 만든 함수이다.
이 함수가 실행되면 1)사진, 이름, 나이, 내용이 불러와지고 2)스크롤 방지하는 함수가 실행되는 순서이다.
💡 해결책 : 모달창을 닫았을 때 다시 스크롤이 되도록 하는 함수를 만들자!
모달창 닫은 후에 스크롤 실행함수
function enableScroll() {
window.onscroll = null;
}처음에 onscroll 로 현재 위치값을 저장했으므로 enableScroll() 이라는 함수가 실행되면 그 값을 null 로 만들었다.
모달창이 사라지게 하는 방식이 두 가지인데 (1. 닫기버튼클릭 2.바깥화면클릭) 각각 함수에 enableScroll() 를 추가해주었다.
✅ 구현된 화면 보기
원하던 대로 잘 만들어졌다!✌️
전체 스크립트
const closeBtn = document.getElementById('close-modal');
const teamModal = document.getElementById('modal_container');
function showModal(member) { // 모달 창 나오는 함수
teamModal.style.display = "none"; // 처음에는 안 보이게 설정
teamModal.style.display = "flex"; // flex로 변경하여 중앙에 위치하도록 함
// 멤버 사진
const imgBox = document.getElementById('member_image');
imgBox.innerHTML = `<img src="${member.imgSrc}" alt="${member.name}">`;
// 멤버 이름, 나이
const memberName = document.getElementById('member_name');
const memberAge = document.getElementById('member_age');
memberName.innerText = member.name;
memberAge.innerText = member.age + "살";
// 멤버 내용
const memberInfo = document.getElementById('member_content');
memberInfo.innerHTML = `
<div class="content_inner">
<img src="${imagePath}icon-agree.png" alt="협업" class="modal_icon">
${member.style}
</div>
<div class="content_inner">
<img src="${imagePath}icon-positive.png" alt="장점" class="modal_icon">
${member.advantages}
</div>
<div class="content_inner">
<img src="${imagePath}icon-tmi.png" alt="tmi" class="modal_icon">
${member.tmi}
</div>
`;
disableScroll(); //외부창 스크롤 방지 함수 추가
}
// 닫기 버튼 누르면 모달 사라짐
closeBtn.addEventListener('click', () => {
teamModal.style.display = "none";
enableScroll(); // 외부 스크롤 재실행
});
// 모달 바깥화면 클릭 시 모달 사라짐
window.addEventListener('click', event => {
if (event.target === teamModal) {
teamModal.style.display = 'none';
enableScroll(); // 외부 스크롤 재실행
}
});
// ** 외부창 스크롤 막는 함수 **
function disableScroll() {
// 현재 페이지 스크롤 위치 가져오기
scrollTop = window.scrollY || document.documentElement.scrollTop;
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
// 스크롤을 시도하면 이전 값으로 설정
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}
// ** 외부창 스크롤 실행 함수 (현재 화면 스크롤 고정값 없애기) **
function enableScroll() {
window.onscroll = null;
}스크롤 값을 받아와서 조건문으로 하면 될 줄 알았는데 오류도 났었고 같은 팀원분께서 더 간단한 방법을 알려주셔서 소스도 훨씬 보기 좋아졌다.
팀프로젝트가 아니었다면 이런 새로운 방식을 알지 못했거나 오래걸렸을텐데 큰 도움이 되었다. 그리고 나중에도 편협하게 생각하지 말고 넓게 생각해서 다양한 코드를 만들어서 구현해야겠다.
