「自制」順暢消失滾動條

Question

我試過jQuery plugin（Malihu滾動條），在我的項目中添加了驚人的自定義滾動條，它可以在簡單的網站中使用。 但是，我厭倦了它在相當複雜的自適應佈局項目中使用它，它不工作。我不明白Malihu滾動條機制（源代碼非常大），因此不知道如何適應我的項目。

所以，我設法創建滾動條，我可以理解的機制。的要求是：

1. 厚
2. 半透明
3. 滾動結束時順利消失，開始滾動的時候再次出現。
4. 不影響佈局（通過圖形編輯器的語言，滾動條位於頂層，不影響其他層）。
5. 跨瀏覽器和跨平臺。

1和2的解決方案非常簡單，接下來是關於佈局的動畫和獨立性。請告訴我最簡單的解決方案（確定使用jQuery）。

我準備了jsfiddle（目前在Chrome瀏覽器中正確的滾動條顯示），並清除了1個和2個任務以節省您的時間。 （沒有必要在這裏貼了源代碼，但srackoverflow需要它的jsfiddle鏈接）

html { 
    overflow: auto; 
} 
body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 5px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(50,50,50,0.5); 
} 

Answer 1

我個人建議這個衆所周知的插件：Prefect Scrollbar

這是非常個性化和容易使用。 該插件旨在用於現代瀏覽器，並支持IE 10及更高版本。

它支持外觀邏輯開箱即用，但我不確定它完全適合您的需求，因爲它是。瞭解更多。

如果您仍然需要滾動條消失的整個頁面上時不滾動，以達到你的第三個要求，你可以根據需要&使用插件支持的事件，如覆蓋插件CSS：

改變默認的外觀邏輯，使其隱形作爲默認：

.ps-container:hover>.ps-scrollbar-x-rail, 
.ps-container:hover>.ps-scrollbar-y-rail { 
    opacity: 0; 
} 

並添加此：

.is-scrolling .ps-scrollbar-x-rail, 
.is-scrolling .ps-scrollbar-y-rail { 
    opacity: .6; 
} 

然後添加一個自定義類（例如is-scrolling）給你應用的插件同樣的元素，由插件，才使滾動條出現，如射擊滾動的事件：

$(document).on('ps-scroll-x ps-scroll-y', function() { 
    $("body").addClass("is-scrolling"); 
}); 

Answer 2

我個人推薦的好插件：enscroll

使用enscroll jQuery插件，能夠爲這些滾動條編寫自己的樣式只是幾行Javascript的問題。

• 滾動條的位置和大小 您移動滾動窗格中自動調整，調整滾動窗格或修改 滾動窗格中的內容
• 支持觸摸事件 - 全面支持移動設備，片劑 和其他觸摸屏設備 - 現在帶有滾動緩和
• 任選地完成時，保持隱藏在滾動，直到用戶懸停在 視圖窗格
• 控制多遠滾動元件滾動時使用鼠標滾輪 或鍵盤
• 您可以控制滾動條元素的類名稱上的箭頭鍵允許滾動條樣式的所有 組合，你需要在同一個頁面
• 上保留語義 - 你不需要在您的 標記中添加任何額外的標記。由於enscroll將這些客戶端，你可以保持 初始DOM奉承

HTML

<div id="scrollbox3"> 
<h1>New Scrolling Window</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p> 
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
</div> 

CSS

#scrollbox3 { 
    overflow: auto; 
    width: 400px; 
    height: 360px; 
    padding: 0 5px; 
    border: 1px solid #b7b7b7; 
} 

.track3 { 
    width: 10px; 
    background: rgba(0, 0, 0, 0); 
    margin-right: 2px; 
    border-radius: 10px; 
    -webkit-transition: background 250ms linear; 
    transition: background 250ms linear; 
} 

.track3:hover, 
.track3.dragging { 
    background: #d9d9d9; /* Browsers without rgba support */ 
    background: rgba(0, 0, 0, 0.15); 
} 

.handle3 { 
    width: 7px; 
    right: 0; 
    background: #999; 
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 7px; 
    -webkit-transition: width 250ms; 
    transition: width 250ms; 
} 

.track3:hover .handle3, 
.track3.dragging .handle3 { 
    width: 10px; 
} 

JS

$('#scrollbox3').enscroll({ 
    showOnHover: true, 
    verticalTrackClass: 'track3', 
    verticalHandleClass: 'handle3' 
}); 

這裏我做一個小的演示。 Have a look.