웹페이지의 스크롤 막기

간단한 미니 게임이 들어간 자기소개 웹페이지 구현중, 

웹페이지에 간단한 게임을 넣는것 까지 완성이 되었는데, 

 

문제가 발생했다. 

 

 

웹페이지를 #id값에 따라 움직이게 했더니 

긴 스크롤이 발생하여, 

게임 안에서 애벌레가 사과를 먹기위해 방향키를 조절할때마다 

위아래로 웹페이지 스크롤이 함께 움직였기 때문이다.

 

 

 

어떻게 웹페이지의 스크롤은 막고, 

게임 캔버스에서 방향키는 조절할 수 있도록 할 수 있을까?

 

 

 

이를 해결하기 위해 구글링을 해보았다. 

 

css fixed? sticky ??

 

모두 내가 원하는 방식이 아니다. 

 

덕분에 fixed 만 알았는데 

몰랐던 sticky 방법에 대해서도 알 수 있었지만... 😎

 

 

구글링을 하면서 스크롤 자체를 없애주기 위해서

css 에서 

oeverflow: hidden;

 

방식을 사용할 수 있다는 것을 발견했다.

 

그래서 js를 이용해서 

 

function disableScroll() { 
  document.body.classList.add("stop-scrolling"); 
} 

let stopScroll = disableScroll();

 

css에는 아래와 같이 작성했다.

 

.stop-scrolling { 
  height: 100%; 
  overflow: hidden; 
} 

 

 

이렇게 했더니 

 

 

짠. 웹페이지에 스크롤바가 사라졌다. 

 

이제 내가 클릭하는 메뉴상단만 갈 수 있는 것이다. 

 

그리고 캔버스는 그대로 화살표 방향키 조절이 가능했다

 

문제 해결:)