아래와 같은 CSS 코드를 설정하여 스크롤바(scrollbar)의 폭을 8픽셀(px)로 지정하여 사용하고 있습니다.
가로와 세로 스크롤바에 모두 적용됩니다.
::-webkit-scrollbar {
display: block;
width: 8px;
height: 8px;
}
sidebar와 같은 상위 레이어 팝업 창을 띄울 때,
1. 일단 주위에 음영(dimm)을 주어 상위 레이어를 강조하고,
2. 하위 레이어인 바탕 페이지가 마우스의 scroll에 반응하는 것을 막기 위하여 아래와 같은 코드를 사용합니다.
body {
overflow: hidden;
}
이때 페이지의 구성에 따라서 layout shift라고 하는 화면 변동이 눈을 어지럽히는 경우가 있습니다. 스크롤바가 사라진 폭만큼 body 요소가 움직이기 때문입니다. 이러한 급격한 화면 움직임은 또한 구글의 PageSpeed Insights에서 CLS(Cumulative Layout Shift) 점수에 악영향을 미쳐서 해당 사이트의 랭킹에 좋지 않은 판단 요소로 작용합니다.
이것을 막기 위하여 여러 가지 CSS 코드를 적용하다가 괜찮은 해결책을 찾아서 자료를 남깁니다.
html {
width: calc(100vw - 8px);
}
사용 기기 디스플레이(윈도)의 최대(100vw) 가로폭에서 스크롤바의 폭을 제외하고 html에 지정하는 것입니다. 처음에 스크롤바의 폭을 8px로 지정하였기 때문에 그만큼의 거리만 제외하였습니다. 자신의 설정에 맞추면 됩니다.
이렇게 설정하면 스크롤바는 8픽셀의 html 여유 공간에서 나타났다 사라졌다 움직임을 보이며 나머지 공간에 영향을 미치지 않습니다.
| body와 같은 부모 컨테이너의 좌우나 상하에 여백이 있고 자식 요소에 "margin: auto"를 적용하여 수평선이나 수직선의 중앙에 배치할 경우, 부모 컨테이너의 좌우 혹은 상하의 어느 한 쪽에 변동이 발생하면 순차적으로 자식 요소의 위치도 변화가 생깁니다. 이 때 레이아웃 쉬프트가 발생합니다. 문단과 글을 왼쪽으로 순리적으로 배치할 경우에는 이와 같은 현상이 거의 발생하지 않습니다. |
body { overflow: hidden; }
- scrollbar 우측에
html { width: calc(100vw - 8px); }
html width 1520px
body { overflow: hidden; }
- scrollbar 우측에
html { width: calc(100vw - 8px); }
html width 1520px
body { overflow: hidden; }
- scrollbar 제거
html { width: calc(100vw - 8px); }
html width 1520px
body { overflow: hidden; }
- scrollbar 제거
html { width: calc(100vw - 8px); }
html width 1528px
정리하여 설명하면,
1. 스크롤바가 있을 경우 그 부분은 html의 너비에 포함되지 않습니다. 그래서 html의 width는 1520px
2. 스크롤바가 없을 경우 그 부분까지 포함하여 html의 width는 1528px가 됩니다. 너비에 8px가 증가하여 shift가 발생 가능한 시점입니다. 이때 html { width: calc(100vw - 8px); } 이 코드를 추가하면 8px를 강제로 제거하여 html의 width는 1520px가 됩니다.
3. 스크롤바가 있고, 없고 상관없이 항상 1520px가 되어 shift가 발생하지 않습니다.
댓글