scroll 에 관해서 한번 정리를 해놔야겠다는
1. 스크롤 집어넣기
overflow하는 속성에 대해서 스크롤을 넣어줄 수 있다.
auto, scroll, hidden등의 속성이 있다.
auto : 컨텐츠가 초과됐을때 scroll 생성
scroll : 무조건 scroll 생성
hidden : 그냥 초과한 컨텐츠 가려버림
2. 스크롤 디자인
webkit을 사용해서 스크롤을해줄 수 있다.
{타겟}::-webkit-scrollbar
스크롤바 컨테이너 {
스 커 커스
{타겟}::-webkit-scrollbar-track {
스크롤 바 밑 배경
{타겟}::-webkit-scrollbar-thumb {
스크롤 바 자체
{타겟}::-webkit-scrollbar-thumb:hover {
스크롤 바 위에 마우스를 올려놓을 때
{타겟}::-webkit-scrollbar-thumb:active {
스크롤 바 클릭했을 때
{타겟}::-webkit-scrollbar-button
스크롤 바 상하단에 화살표 눌렀을 때 {
3. 잡기술
"hover"가 되었을때 "overflow: scroll"을 주는 방법을 사용하면 되게 이쁘다.
스크롤이 보이지 않다가 마우스 클릭시 혹은 터치시 스크롤이 보이게 된다.