javascript - 在滚动条上隐藏/显示 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 Scrollbar这是 jQuery 插件，从它的名字就可以看出。它是基于 native 浏览器滚动的跨浏览器解决方案，并且完全可自定义 CSS。查看演示示例，找到您需要的那个(我认为它将是 Mac OS X 示例)并更改 CSS 以使用过渡效果。

要将滚动条应用于文档，您必须使 html/body 的高度/宽度:100%、溢出:隐藏，将您的页面包装到高度/宽度:100% 和溢出:自动的 DIV 中，并将滚动条应用于此分区。要使滚动条在滚动期间可见(例如，对于触摸设备)，请使用 onScroll 回调将类添加到容器/包装器。