Web - popup 띄울 때 scroll 방지
popup 띄울 때 scroll 방지
popup을 띄울 때 단순히 overflow: hidden;
만 넣으면 스크롤은 없어지긴 하는데 다시 스크롤 생길 때 스크롤 이동 현상이 발생
const body = document.querySelector('body');
const btn = document.querySelector('.btn');
let scrollPosition = 0; // 저장할 스크롤 위치
// 팝업 등장시 이벤트
function openPopup() {
scrollPosition = window.pageYOffset;
body.style.overflow = 'hidden';
body.style.position = 'fixed';
body.style.top = `-${scrollPosition}px`;
body.style.width = '100%';
}
// 팝업 닫기 버튼 이벤트
btn.addEventListener('click', () => {
body.style.removeProperty('overflow');
body.style.removeProperty('position');
body.style.removeProperty('top');
body.style.removeProperty('width');
window.scrollTo(0, scrollPosition);
});
그래서 위 같은 방식으로 팝업을 띄울 때 스크롤 값을 변수에 할당하고, 스크롤을 없앰.
그리고 팝업이 사라지면 스크롤을 변수가 갖고 있는 위치로 이동시키는 식으로 함.
구글링 하다가 찾았지만 나중에 찾기 편하게 정리해 둠.
Author And Source
이 문제에 관하여(Web - popup 띄울 때 scroll 방지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hemtory/popupScrollRemove
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
popup을 띄울 때 단순히 overflow: hidden;
만 넣으면 스크롤은 없어지긴 하는데 다시 스크롤 생길 때 스크롤 이동 현상이 발생
const body = document.querySelector('body');
const btn = document.querySelector('.btn');
let scrollPosition = 0; // 저장할 스크롤 위치
// 팝업 등장시 이벤트
function openPopup() {
scrollPosition = window.pageYOffset;
body.style.overflow = 'hidden';
body.style.position = 'fixed';
body.style.top = `-${scrollPosition}px`;
body.style.width = '100%';
}
// 팝업 닫기 버튼 이벤트
btn.addEventListener('click', () => {
body.style.removeProperty('overflow');
body.style.removeProperty('position');
body.style.removeProperty('top');
body.style.removeProperty('width');
window.scrollTo(0, scrollPosition);
});
그래서 위 같은 방식으로 팝업을 띄울 때 스크롤 값을 변수에 할당하고, 스크롤을 없앰.
그리고 팝업이 사라지면 스크롤을 변수가 갖고 있는 위치로 이동시키는 식으로 함.
구글링 하다가 찾았지만 나중에 찾기 편하게 정리해 둠.
Author And Source
이 문제에 관하여(Web - popup 띄울 때 scroll 방지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hemtory/popupScrollRemove저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)