[JavaScript] 사용자 스크롤 막기 및 스크롤 여백 처리

const preventUserScroll = ( scrollMarginProcessing ) => {

💻 return Result;

See the Pen Untitled by 구태 (@wbnnhjvf-the-lessful) on CodePen.

 

📝 console.log( history )

 회사 프로젝트 진행 중 사용자가 특정 요소를 클릭하면 입력폼으로 스크롤되도록 하는 페이지가 있었다. 구현 후 문제는 스크롤 도중에 멈추거나 정확한 위치로 이동하지 않는다는 것이었다. scrollIntoView 함수를 사용해서 스크롤을 구현하였는데 도중에 state가 바뀌거나 스크롤 이벤트가 일어나게 되면 진행되던 스크롤이 멈추는 문제가 있었다.

 

 state에 의해 스크롤이 도중에 멈추는 문제는 해결했지만 사용자 스크롤을 막을 방법에 대해서 생각해야 했다. scoll event를 등록해서 사용하기에는 스크롤을 허용하고 막을 시점을 잡기가 어려워 보였다. 그래서 구글링 도중 사용자의 스크롤 입력을 막는 방법으로 overflow 옵션을 hidden으로 설정하게 되면 사용자의 스크롤 입력을 막을 수 있었다. scrollIntoView 함수가 해당 요소로 이동할 때 걸리는 시간은 대략 450~475ms 사이였다. 그래서 scrollIntoView 함수와 함께 overflow 값을 hidden으로 변경해 주고 setTimeout을 통해 scrollIntoView 함수가 완료되고 overflow를 다시 scroll이나 auto로 설정해 주어 해결했다.

 

 추가로 overflow 옵션을 hidden으로 설정할 경우 스크롤 너비에 의해 페이지 너비가 바뀌는 문제가 있었다. 검색을 통해 scrollbar-gutter 옵션을 stable로 설정하여 너비를 고정시킬 수 있는 방법을 찾았다. 다만, stable로 설정할 경우 스크롤 너비만큼 여백이 생겼다. 여백에 대해서는 해결하지 못했지만 css를 통해 여러 방법을 고안해 낼 수 있을 것이라 생각한다.

 

/ /  Improvement

 썩 마음에 드는 해결방법은 아니다. 이유는 사용자의 스크롤을 강제로 막아야 한다는 점, 스크롤이 없어지고 생기는 것이 사용자에게 보인다는 점이다. 또한 현재까지 여러 회사 프로젝트를 진행해 오면서 state에 대한 문제들을 겪었다. 어떻게 state 사용해야 이번 문제와 같은 것들이 생기지 않는지 고민해야겠다. 

}