隱藏/顯示滾動條上的webkit滾動條

我想使滾動條在默認情況下使用不透明度隱藏，然後當用戶滾動頁面或懸停在淡入的滾動條時（由CSS轉換處理）。然後，當用戶停止滾動時，滾動條會在1秒後淡出。隱藏/顯示滾動條上的webkit滾動條

的代碼是：

/* 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標籤）。

任何想法？

來源

2014-07-14 Cameron

'-webkit-overflow-scrolling：touch' work ..？ –

這不僅適用於iOS？ – Cameron

哦，是的。你可能想看看一些自定義滾動插件... –

你可以試試jQuery Scrollbar這是jQuery插件，你可以從它的名字中看到。它是基於本地瀏覽器滾動的跨瀏覽器解決方案，並且完全可以通過CSS進行定製。查看演示示例，找到您需要的示例（我認爲它將是Mac OS X示例），並將CSS更改爲使用過渡效果。

要將滾動條應用於文檔，您必須製作html/body的高度/寬度：100％，overflow：hidden，將頁面包裝爲DIV，高度/寬度爲100％，溢出：auto，並將滾動條應用於這個DIV。爲了使滾動條在滾動期間可見（例如，用於觸摸設備），請使用onScroll回調函數將類添加到容器/包裝器。

來源

2014-07-14 12:57:44 Gromo

隱藏/顯示滾動條上的webkit滾動條

回答

相關問題