在滚动条上显示滚动条，否则隐藏它，首先保持它的z索引。

Question

描述

如果用户不在页面上滚动，我想隐藏滚动条。一旦他开始在页面上滚动，滚动条就会变得可见。

这段代码允许我在滚动开始时做任何事情。

$("#element").on("scroll",function(){});

让我在div中添加一个类

-webkit-scrollbar
{
    width: 0px !important;
}

这个css确实隐藏了条形图。

问题

当用户滚动时，条形图会被显示出来，但它在下潜过程中会占用一点空间，这也会干扰其他div的放置。

我想要什么

我想要的是显示滚动条，但以某种方式改变它的z索引，以便当它被显示时，它不会占用div中的空间.

，到现在为止，我做了什么，

我已经设计了滚动条的样式，当用户滚动时，它的显示/隐藏切换是我前面讨论过的问题。有人对此熟悉吗?？

Answer 1

铬你说..。:)

jsBin演示

我发现only的方法非常简单，就是使用预定义的空间，滚动条将在其中出现。现在，没有混乱的垫子，位置，包装等，最简单的解决方案是：

使滚动条透明！

因此，默认情况下，添加一个"transparents“滚动条元素的类：

<div id="element" class="hideScroll"></div>

CSS：

.hideScroll::-webkit-scrollbar{
  background:transparent;
}
.hideScroll::-webkit-scrollbar-thumb {
  background: transparent;
}

滚动上的删除类(应用默认样式)！

var scrollTimeout;
$(".hideScroll").on("scroll",function(){
  clearTimeout(scrollTimeout);
  var $that = $(this);

  $that.removeClass('hideScroll');
  scrollTimeout = setTimeout(function(){
     $that.addClass('hideScroll');
  },220);
});

并在所需的超时后重新添加它。