css에서 selector에 스크롤바를 설정할 수 있다
. box { overflow : visible }
visible은 아무것도 설정하지 않았을 때의 기본 옵션이다
. box { overflow : auto }
평소엔 안 보이다가 내용이 박스의 높이 또는 너비 이상으로 길어질 경우 스크롤바가 생성된다
. box { overflow-x : scroll }
가로축 스크롤바만 만들고 싶을 때 사용한다
. box { overflow-y : scroll }
세로축 스크롤바만 만들고 싶을 때 사용한다
. box { overflow : hidden }
내용이 박스의 공간을 넘아갈 시 넘어간 내용을 보이지 않게 한다
css 작업을 하면서 특정 영역에 스크롤바의 기능은 하지만 스크롤바는 보여주기 싫을 때
스크롤바를 투명으로 설정하여 기능은 하지만 보이지는 않게 할 수 있다
::-webkit-scrollbar {
display: none;
}
을 그대로 가져다가 붙여주면 된다.
만약 IE를 사용한다면
::-ms-scrollbar {
display: none;
}
로 가져가면 해결된다.
최근 쇼핑리스트를 제작하면서 작성한 목록이 쌓여 일정 높이 이상으로 길어질 때 스크롤바가 생겼다
스크롤바가 안쪽으로 너비를 조금 차지하기 때문에 목록을 작성하는 부분의 모양이
스크롤바가 생길 때마다 변하는 게
어딘가 이상해보였다 그래서 스크롤바 투명 효과를 주었더니 매우 깔끔해 보여서 맘에 든다
반응형