모달창을 띄우고 모달창 위에서 스크롤하게 되면 모달창안에서 스크롤이 잘된다. 그런데 문제가 생겼다. 모달창 아래 끝에서 스크롤을 하니 body창이 스크롤이 된다.
그렇다면 쉽게 생각할 수 있는 것은 에이 그러면 이벤트 버블링 때문이겠네 버블링을 막으면 되겠지!!라는 생각을 하게 되고 당연하게 stopPropagation()으로 잘 막아준다.
역시나 되지 않는다... 뭐지라는 생각을 하면서 window.addEventListener('scroll', function) 을 찍어서 오는지 확인을 한다. 어? 잘오네?? 그러면 여기서 기본 동작을 막자라는 마음으로 preventDefault()를 찍으면 당연히 안된다.
window에서 행해지는 스크롤을 막는법은 JS로는 도저히 보이지 않는다. 이럴 때는 아래와 같이 body에 style을 추가 해주자.
document.body.style.overflow = 'hidden'
overflow를 hidden으로 주게 되면 더이상 스크롤이 먹지 않게 되고 여태 움직였던 위치도 고정이 되는 신기한 현상이 된다. 혹시나 다른 블로그에 나오는 position: fixed를 하게 되면 스크롤이 최상단으로 가니 조심하자.
모달창을 띄우고 모달창 위에서 스크롤하게 되면 모달창안에서 스크롤이 잘된다. 그런데 문제가 생겼다. 모달창 아래 끝에서 스크롤을 하니 body창이 스크롤이 된다.
그렇다면 쉽게 생각할 수 있는 것은
에이 그러면 이벤트 버블링 때문이겠네 버블링을 막으면 되겠지!!라는 생각을 하게 되고 당연하게stopPropagation()으로 잘 막아준다.역시나 되지 않는다... 뭐지라는 생각을 하면서
window.addEventListener('scroll', function)을 찍어서 오는지 확인을 한다. 어? 잘오네?? 그러면 여기서 기본 동작을 막자라는 마음으로preventDefault()를 찍으면 당연히 안된다.window에서 행해지는 스크롤을 막는법은 JS로는 도저히 보이지 않는다. 이럴 때는 아래와 같이 body에 style을 추가 해주자.
overflow를 hidden으로 주게 되면 더이상 스크롤이 먹지 않게 되고 여태 움직였던 위치도 고정이 되는 신기한 현상이 된다. 혹시나 다른 블로그에 나오는
position: fixed를 하게 되면 스크롤이 최상단으로 가니 조심하자.