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> 

但我不希望使用水平滚动条，我想创建自定义滚动条类似的Metro风格，使用滚动鼠标时在砖进入，并隐藏在鼠标离开。

我为tileContainer设置了overflow: hidden;来显示浏览器的滚动条。

有没有人有一个不错的插件和解决方案？

Answer 1

这是Demo。将鼠标悬停在文本上，您将看到结果。如果你只想垂直滚动，你可以使用overflow-x：hidden;

1. 改变滚动的默认样式您可以使用:: - WebKit的滚动条风格 你可以写这样的：如果你想只显示滚动

   #tileContainer::-webkit-scrollbar 
   { 
       width: 9px; 
       height: 9px; 
   } 
   
   #tileContainer::-webkit-scrollbar-track 
   { 
       background: #ececec; 
   } 
   
   #tileContainer::-webkit-scrollbar-thumb 
   { 
       background: #bebebe; 
   } 
   

2. 上了mouseenter您可以使用此代码：

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