javascript-Jquery地铁风格自定义滚动条

我有一个地铁风格的网站。我在它的倍增瓷砖，并显示水平滚动条和它使用鼠标滚轮

  #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>

#包装器{
边际：0px；
填充：90px 0px 1px；
位置：相对位置；
z指数：0；
} 
#中心包装{
位置：相对位置；
利润率：0px自动15px；
填充：0px 25px 0px 0px；
}
#tileContainer{
位置：相对位置；
边缘顶部：30px；
}
//瓦片
//显示滚动条

但我不想使用水平滚动条，我想创建一个自定义滚动条，如metro样式，当鼠标进入平铺时使用滚动条，当鼠标离开时使用隐藏

我设置

溢出：隐藏用于显示浏览器滚动条上的
tileContainer

有人有好的插件和解决方案吗？
这里是。将鼠标移到文本上，您将看到结果。如果只需要垂直滚动，可以使用overflow-x:hidden

要更改滚动的默认样式，可以使用：-webkit滚动条样式
你可以这样写：

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

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

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


如果只想在鼠标上显示滚动条，可以使用以下代码：

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


您能添加一个JSFIDLE吗？非常感谢您的解决方案，但它有两个问题，1。可以更改滚动条的位置（它连接到控件）。2.可以用鼠标滚轮吗。您可以将：--webkit滚动条添加到任何控件。如果您看到已写入div id->#tileContainer。您可以在那里写入任何控件id，滚动条将显示在该控件2上。它也适用于鼠标滚轮。我不明白这个问题，谢谢，我添加了这个，但不适用于鼠标滚轮，我应该为鼠标滚轮添加jquery吗？要使这个js代码正常工作，当然必须包含jquery。正如您在我引用的演示中所看到的，鼠标滚轮工作正常。