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插件，正如你可以从它的名字中看到的那样。它是基于本机浏览器滚动的跨浏览器解决方案，完全可以自定义CSS。查看演示示例，找到您需要的示例（我认为它将是Mac OS X示例）并更改CSS以使用转换效果。

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

滚动时隐藏/显示webkit滚动条

1 个答案: