Jquery地铁风格的自定义滚动条

Jquery custom scroll bar on metro style

本文关键字：自定义 滚动条 风格 地铁 Jquery      更新时间：2023-09-26

我有一个网站采用了metro风格。我在里面有一个乘法瓦片，并显示水平滚动条，它和鼠标滚轮一起使用。

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

但我不想使用水平滚动条，我想创建一个类似地铁风格的自定义滚动条，当鼠标进入瓷砖时使用滚动，当鼠标离开时隐藏。

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

有人有一个好的插件和解决方案吗？

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

  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");
});
相关文章：