[HTML/CSS] 브라우저 창 조절 시 스크롤바 떨림 현상 해결

[HTML/CSS] 브라우저 창 조절 시 스크롤바 떨림 현상 해결

 

 

 

초기 페이지를 만들다가 스크롤을 축소시키면 위와 같은 현상이 일어났다. 일정크기 이하가 되면 페이지 안에서 드래그를 하거나, 페이지 창을 줄이면 스크롤바가 나타났다가 없어졌다가 하면서 떨리는 것 같은 현상이 일어났다.

 

무엇이 문제일까 생각하다가, GPS 버튼을 새로만들고 생긴 현상인 것을 알았고, GPS 버튼을 살짝 이동시켜보았다.

 

gps 버튼이 축소되면서 스크롤에 걸릴 때 이와같은 현상이 일어난 것이었다. gps버튼의 css left 속성의 값을 %로 주고 있어서 위치가 바뀔 때 마다 변경이 되었다.

그러나 이는 완벽한 해결방법은 아니다.

현재 html 태그 안에서 gps버튼의 위치는 파란색 컨텐츠 안에 속해있다. 그래서 파란색 컨텐츠 안에서 상대위치를 적용받는다. 때문에 left:95%로 위치를 정한다고 하면, 또 언제든지 떨림현상을 마주할 수 있다. 그래서 css 속성을 right로 하고 7px 정도로 주어서 화면이 작아져도 이동이 되지 않게 하였다.

 

 

 

css 값을 활용하여 위치를 지정할 때, %와 px를 때에 맞게 활용해야 겠다는 깨달음을 얻었다.