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

我试图使滚动条在默认情况下使用不透明度隐藏，然后当用户滚动页面或悬停滚动条时，滚动条淡入（由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 inspector，会应用样式，但滚动条是可见的（无论滚动类是否附加到HTML标记）

有什么想法吗？

你可以试试哪个是jQuery插件，从它的名字可以看出。这是一个基于本机浏览器滚动的跨浏览器解决方案，并且完全可以定制CSS。查看演示示例，找到您需要的示例（我认为将是MacOSX示例），并更改CSS以使用过渡效果

---

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

webkit溢出滚动：touch是否有效？这不是仅适用于iOS吗？哦，是的。你可能想看看一些定制的滚动插件…不确定不透明度，但我认为即使是转换也不行。检查。一个选择是使背景最初是透明的，并在悬停时改变颜色。类似的东西会更接近你所需要的。