css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?

이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.

여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.

참고:

css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.

css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열

css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)

css지옥에서 탈출하자(4) - display: flex와 margin: auto를 이용해서 기존의 문제 해결(header나 nav에서 한 엘리먼트만 좌측 배치, 바닥에 붙는 footer, 수직 중앙정렬)

css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기

css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기

위의 영상을 보면 알겠지만 일반적으로 css에서 스크롤을 줄때는 overflow-y, overflow-x나 overflow를 사용하게 된다.

하지만 스크롤을 하는건 좋은데 스크롤바가 너무 보기 싫다.

특히 IE에서는 스크롤바가 매우 투박하게 보여서 보기 가 싫어진다.

해당 코드는 위와같다. 스크롤이 매우 지저분하게 보이는게 마음에 안든다.

그럼 스크롤을 없애보자.

ul에 마진과 패딩이 자동으로 설정되므로 딱 맞추기 위해서 0으로 설정했따.

li에서 점을 없애기 위해서 list-style을 none으로 했다.

원리는 사실 되게 간단하다. 적당히 50px정도늘린다. 더 적어도 상관은 없다.

그리고 div를 다시 감싸고(예제에서 outer)크기를 원래 보여주기만 할려고 했던 크기로 고정한다.

그리고 overflow에 hidden을 줘서 스크롤 못하게 고정시킨다.

그러나 안에서는 scroll이 동작하므로 스크롤바가 가려져서 스크롤이 마치 동작하는 것처럼 보여진다.