描述
如果用户没有在页面上滚动,我想要隐藏滚动条。一旦他开始在页面上滚动,滚动条就会变得可见。
这段代码让我在滚动开始时做任何事情
$("#element").on("scroll",function(){});
让我在div中添加一个类
-webkit-scrollbar
{
width: 0px !important;
}
这个css真的隐藏了酒吧。
问题
当用户滚动时,栏会显示但是在滚动的潜水中需要一点空间,这也会扰乱其他div的放置。
我想要什么
我想要的是在滚动时显示滚动条,但不知何故更改其z-index,以便在显示时它不会占用div中的空间....
到目前为止我做了什么
我设置了滚动条的样式 用户滚动显示/隐藏切换时,所有剩下的就是我上面讨论过的问题......有人熟悉吗?
答案 0 :(得分:1)
Chrome你说... :)
我发现非常容易实现的唯一方式是使用预定义空间,其中会出现滚动条。现在,没有弄乱填充,位置,包装等等,最简单的解决方案是:
使滚动条透明 !
因此,默认情况下,添加一个" 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);
});
并在所需的超时后重新添加。