在滚动条上隐藏/显示webkit滚动条

Question

我正在尝试使其默认情况下使用不透明度隐藏滚动条，然后在用户滚动页面或悬停滚动条时淡入（由CSS过渡处理）。 然后，当用户停止滚动时，滚动条将在1秒钟后再次淡出。

代码是：

/* CSS */

::-webkit-scrollbar
{
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

::-webkit-scrollbar:hover,
.scrolling::-webkit-scrollbar
{
    opacity: 1;
}

/* JS */

$(document).ready(function(){

    var scrollingTimeout = setInterval(function(){
        $('html').removeClass('scrolling');
    }, 1000);

    $(window).scroll(function(){
        clearInterval(scrollingTimeout);
        $('html').addClass('scrolling');
    });

});

但是不透明似乎不起作用？ 如果我在Web检查器中查看，则将应用样式，但是滚动条是可见的（无论是否将滚动类附加到HTML标记）。

有任何想法吗？

Answer 1

您可以尝试使用jQuery插件jQuery Scrollbar ，从其名称中可以看到。 它是基于本机浏览器滚动的跨浏览器解决方案，并且可以完全CSS自定义。 查看演示示例，找到所需的示例（我想这将是Mac OS X示例），然后更改CSS以使用过渡效果。

要将滚动条应用于文档，您将必须使html / body的高度/宽度：100％，溢出：隐藏，将页面包装到高度/宽度为100％的DIV中，并溢出：自动，然后将滚动条应用于此DIV。 要使滚动条在滚动过程中可见（例如，对于触摸设备），请使用onScroll回调将类添加到容器/包装器中。