javascript - 메트로 스타일의 Jquery 사용자 정의 스크롤 막대

Question

메트로 스타일이있는 웹 사이트가 있습니다. 나는 타일을 곱하고 수평 스크롤 막대를 표시하고 마우스 휠과 함께 사용합니다.

#wrapper { 
    margin: 0px; 
    padding: 90px 0px 1px; 
    position: relative; 
    z-index: 0; 
    } 
    #centerWrapper { 
    position: relative; 
    margin: 0px auto 15px; 
    padding: 0px 25px 0px 0px; 
    } 
    #tileContainer { 
    position: relative; 
    margin-top: 30px; 
    } 

    <div id="wrapper"> 
    <div id="centerWrapper"> 
     <div id="tileContainer" style="overflow: hidden"> 
     //Tiles 
     </div> 
    </div> 
    </div> 
    //show scroll bar 
    <div class="scrollTools" style="position: absolute; display: block; opacity:  0;"> 
     <div class="draggerContainer"> 
      <div class="dragger" style="position: absolute; width: 1113px; left: 0px;" oncontextmenu="return false;"> 
       <div class="dragger_bar" style="position: relative;"></div> 
      </div> 
      <div class="draggerRail"></div> 
     </div> 
    </div> 

하지만 가로 스크롤 막대를 사용하지 않으려는, 나는 지하철 스타일과 같은 사용자 정의 스크롤 막대, 마우스가 타일에 입력 할 때 마우스 휴가를 숨기는 것을 사용 스크롤을 생성합니다.

tileContainer에 대해 overflow: hidden;을 브라우저의 스크롤 막대로 표시하도록 설정했습니다.

누구나 멋진 플러그인과 솔루션을 가지고 있습니까?

Answer 1

여기는 Demo입니다. 텍스트 위로 마우스를 가져 가면 결과를 볼 수 있습니다. 수직 스크롤 만 원할 경우 overflow-x : hidden을 사용할 수 있습니다. 당신은 단지 스크롤을 표시하려면

#tileContainer::-webkit-scrollbar 
{ 
    width: 9px; 
    height: 9px; 
} 

#tileContainer::-webkit-scrollbar-track 
{ 
    background: #ececec; 
} 

#tileContainer::-webkit-scrollbar-thumb 
{ 
    background: #bebebe; 
} 

:이 같은 것을 쓸 수 스타일 웹킷 - 스크롤 -

1. 는 당신이 :: 을 사용할 수있는 스크롤의 기본 스타일을 변경합니다

   $('#tileContainer').on('mouseenter', 
   function(){ 
       $(this).css("overflow","auto"); 
   }).on('mouseleave', 
   function(){ 
       $(this).css("overflow","hidden"); 
   });