티스토리 뷰

아무 동작이 없을경우 약 3초정도후에 스크롤바가 사라지며 그상태에서 휠을 움직이면 얇은 스크롤바로 변해서 움직이고

마우스이동이 감지되면 다시 원상태로 나옵니다.

 

[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

 







저작자 표시 비영리
신고
댓글
댓글쓰기 폼