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风格的自定义滚动条，当鼠标进入瓷砖时使用滚动，并在鼠标离开时隐藏。

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

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

Answer 1

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

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

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

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

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

如果您只想在mouseenter上显示滚动，可以使用以下代码：

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

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

1 个答案: