jquery - 在滚动条上显示滚动条，否则隐藏它，保持其 z-index 高于一切

Question

描述

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

这段代码让我可以在滚动开始时做任何事情

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

让我在 div 中添加一个类

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

这个 css 确实隐藏了障碍。

问题

当用户滚动时，该栏会显示出来，但它会在滚动的 div 中占用一点空间，这也会干扰其他 div 的放置。

我想要什么

我想要的是在滚动时显示滚动条，但以某种方式更改其 z-index，以便在显示时不会占用 div 中的空间....

到目前为止我做了什么

我已经设置了滚动条的样式 当用户滚动时处理它的显示/隐藏切换，剩下的就是我在上面讨论过的问题......有人熟悉吗？？

Answer 1

Chrome 你说... :)

jsBin demo

我发现唯一真正容易做到的方法是使用滚动条出现的预定义空间。现在，在不弄乱填充、位置、包装器等的情况下，最简单的解决方案是:

使滚动条透明!

因此默认情况下添加一个“透明”滚动条元素的类:

<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);
});

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