반응형
아무 동작이 없을경우 약 3초정도후에 스크롤바가 사라지며 그상태에서 휠을 움직이면 얇은 스크롤바로 변해서 움직이고
마우스이동이 감지되면 다시 원상태로 나옵니다.
![[IE10이상] 웹사이트의 스크롤바를 더욱 아름답게 표현해주는 동적스크롤바 - WEB TIP - romeo1052.net](http://romeo1052.net/xe/files/attach/images/31907/476/123/ae175abbda66faf93bb00b7197cbbc06.png "[IE10이상] 웹사이트의 스크롤바를 더욱 아름답게 표현해주는 동적스크롤바 - WEB TIP - romeo1052.net")
이런식으로 사이트 바깥으로 나오는게 아니라 반투명 오버레이되어 표현되기때문에 아주 작은 차이이고 굳이 없어도 되는기능이긴한데 무척이나 세련되게 보이는 느낌이 나긴 합니다.
1 | <style> @-ms-viewport { width: device-width; } </style> |
덜렁 이 한줄을 페이지내 <head> 사이에 넣으시면 됩니다.
TIP.
기존의 스크롤바 컬러를 변경하는 코드와 함께 사용이 되면 더욱 예쁜 스크롤바를 만들수가 있습니다.
1 2 3 4 5 6 7 8 | html { scrollbar-arrow-Color: #efefef; scrollbar-Track-Color: #efefef; scrollbar-base-Color: #dfdfdf; scrollbar-Face-Color: #dfdfdf; scrollbar-3dLight-Color: #dfdfdf; scrollbar-DarkShadow-Color: #dfdfdf; scrollbar-Highlight-Color: #dfdfdf; scrollbar-Shadow-Color: #dfdfdf} |
다만 IE10 이상에서만 되고 웹킷용 브라우저나 타사 브라우저는 나오지 않고,
FIXED 메뉴나 아이콘등을 브라우저 끝에 붙여놓았다면 스크롤바에 가려지는 경우가 있어서 권장할만하지 않습니다.
스크롤바랑 겹치지 않게 메뉴나 아이콘을 이동시키면 크롬이나 파폭등에서는 그 떨궈놓은 여백의 크기가 다르게 보이기 때문입니다.
Web Designer: IE10 scrollbar overlay on page issue - Solution
IE10 scrollbar overlay Solution:
The following piece of code will solve IE10 scroll-bar issue
반응형
'유틸리티, 정보 > WEB TIP' 카테고리의 다른 글
| CSS로 웹사이트의 스크롤바를 커스텀 변경하기 ie,Chrome,Safari (0) | 2016.04.30 |
|---|---|
| SWIFT 은행 식별 코드(BIC) (2) | 2016.04.27 |
| 책상에 오래 앉으시는 분들 허리에 좋은 자세 (0) | 2016.04.19 |
| 디자이너를 위한 깔끔한 플랫 아이콘 세트 템플릿 PSD파일 21종 (0) | 2016.04.15 |
| CSS 사이즈(Size) 단위에 대해서 (0) | 2016.04.15 |
| 부드럽게 나타나는 팝업창 leanmodal.js (0) | 2016.04.15 |
| 노트, 페이지, 윈도우 디자인 PSD 템플릿 (0) | 2016.04.14 |
| 유용하고 자주쓰이는 스타일시트(css) 속성 정리 (0) | 2016.04.12 |
| 웹디자인과 앱디자인을 위한 플랫 아이콘, 소셜 템플릿 PSD파일 FLAT ICON SET (0) | 2016.04.12 |