滚动显示滚动条,否则隐藏它保持其z-index首先

时间:2014-09-14 22:39:35

标签: jquery css

描述

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

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

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

让我在div中添加一个类

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

这个css真的隐藏了酒吧。

问题

当用户滚动时,栏会显示但是在滚动的潜水中需要一点空间,这也会扰乱其他div的放置。

我想要什么

我想要的是在滚动时显示滚动条,但不知何故更改其z-index,以便在显示时它不会占用div中的空间....

到目前为止我做了什么

我设置了滚动条的样式 用户滚动显示/隐藏切换时,所有剩下的就是我上面讨论过的问题......有人熟悉吗?

1 个答案:

答案 0 :(得分:1)

Chrome你说... :)

jsBin demo

我发现非常容易实现的唯一方式是使用预定义空间,其中会出现滚动条。现在,没有弄乱填充,位置,包装等等,最简单的解决方案是:

使滚动条透明

因此,默认情况下,添加一个" 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);
});

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