如何自定義自定義滾動？

我希望我的卷軸有一個透明的背景，滾動是一個輕微的白色短跑，並有一個向上的箭頭和向上的箭頭......這是我現在正在定製的方式。它給了我一個灰色的長卷......但我不知道要編輯什麼來改變它？如何自定義自定義滾動？

::-webkit-scrollbar { 
    width: 10px; 
    height: 6px; 
} 

::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
    height: 30px; 
    display: block; 
    background-color: transparent; 
} 

::-webkit-scrollbar-track-piece { 
    background-color: transparent; 
    -webkit-border-radius: 6px; 
} 

::-webkit-scrollbar-thumb:vertical { 
    height: 50px; 
    background-color: #666; 
    -webkit-border-radius: 6px; 
} 

::-webkit-scrollbar-thumb:horizontal { 
    width: 50px; 
    background-color: #666; 
    -webkit-border-radius: 3px; 
}

來源

2012-02-10 Beginner

如果您不知道要更改什麼，則需要對自定義Webkit滾動條進行一些研究。關於這個主題有不少教程。 – Bojangles 2012-02-10 15:54:33

面前回答這樣一個問題，這裏有三個jQuery插件，在自定義滾動在所有瀏覽器做好：

來源

2012-02-17 17:40:40

這個職位對滾動條CSS http://css-tricks.com/custom-scrollbars-in-webkit/

這篇文章有幾個jQuery的解決方案可能是值得考慮的，其中有一些設備的支持，特別是微小的滾動一些非常好的信息。

來源

2012-02-14 09:33:47 JuanOjeda

拳頭，我只是想確保你知道這隻適用於webkit瀏覽器（Chrome和Safari）。

下面是一個更完整的示例，如您所見，需要大量的css才能獲得看起來不錯的東西。

<head> 
    <style> 
    /* set the width and height */ 
    ::-webkit-scrollbar { 
     width: 14px; 
     height: 6px; 
    } 

    /* turn on the buttons at the top */ 
    ::-webkit-scrollbar-button:start{ 
     display: block; 
    } 
    /* turn off the buttons at the bottom */ 
    ::-webkit-scrollbar-button:end{ 
     display: none 
    } 


    ::-webkit-scrollbar-track-piece { 
     background-color: transparent; 
     -webkit-border-radius: 6px; 
    } 

    ::-webkit-scrollbar-thumb:vertical { 
     height: 50px; 
     background-color: #666; 
     -webkit-border-radius: 6px; 
    } 

    ::-webkit-scrollbar-thumb:horizontal { 
     width: 50px; 
     background-color: #666; 
     -webkit-border-radius: 3px; 
    } 


    ::-webkit-scrollbar-corner { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner.png); 
     background-repeat: no-repeat; 
    } 

    ::-webkit-scrollbar-corner:window-inactive { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/corner-inactive.png); 
    } 

    ::-webkit-resizer { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer.png); 
     background-repeat: no-repeat; 
     background-position: bottom right; 
    } 

    ::-webkit-resizer:window-inactive { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/resizer-inactive.png); 
    } 

    ::-webkit-scrollbar-track-piece:disabled { 
     display: none !important; 
    } 

    ::-webkit-scrollbar-button:disabled { 
     display: none !important; 
    } 

    ::-webkit-scrollbar-track:disabled { 
     margin: 6px; 
    } 


    ::-webkit-scrollbar:vertical { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0; 
     border-color: transparent; 
     border-width: 2px 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background.png); 
     background-repeat: repeat-y; 
    } 

    ::-webkit-scrollbar:vertical:corner-present { 
     border-bottom-width: 0; 
    } 

    ::-webkit-scrollbar-track:vertical:disabled:corner-present { 
     margin-bottom: 5px; 
    } 

    ::-webkit-scrollbar:vertical:window-inactive { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-background-inactive.png); 
    } 

    ::-webkit-scrollbar-thumb:vertical { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb.png) 13 0 13 0; 
     border-color: transparent; 
     border-width: 13px 0; 
     min-height: 20px; 
    } 

    ::-webkit-scrollbar-thumb:vertical:hover { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-hover.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-thumb:vertical:active { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-active.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-thumb:vertical:window-inactive { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-thumb-inactive.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:start:no-button, 
    ::-webkit-scrollbar-track-piece:vertical:start { 
     margin-top: 6px; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:end:no-button, 
    ::-webkit-scrollbar-track-piece:vertical:end { 
     margin-bottom: 6px; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:end:no-button:corner-present, 
    ::-webkit-scrollbar-track-piece:vertical:end:corner-present { 
     margin-bottom: 5px; 
    } 


    ::-webkit-scrollbar-track-piece:vertical:start:single-button, 
    ::-webkit-scrollbar-track-piece:vertical:start:double-button, 
    ::-webkit-scrollbar-track-piece:vertical:start { 
     margin-top: -6px; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:end:single-button, 
    ::-webkit-scrollbar-track-piece:vertical:end:double-button, 
    ::-webkit-scrollbar-track-piece:vertical:end { 
     margin-bottom: -6px; 
    } 

    ::-webkit-scrollbar-track:vertical:disabled { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-disabled.png) 13 0 13 0; 
     border-color: transparent; 
     border-width: 13px 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:decrement { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0; 
     border-color: transparent; 
     border-width: 13px 0 0 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:decrement:hover { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:decrement:active { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:increment { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track.png) 13 0 13 0; 
     border-color: transparent; 
     border-width: 0 0 13px 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:increment:hover { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-hover.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-track-piece:vertical:increment:active { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-track-active.png) 13 0 13 0; 
    } 

    ::-webkit-scrollbar-button:vertical { 
     height: 20px; 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button.png) 2 0 2 0; 
     border-color: transparent; 
     border-width: 2px 0; 
    } 

    ::-webkit-scrollbar-button:vertical:decrement { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background.png); 
     background-repeat: no-repeat, repeat-y; 
     background-position: 3px 3px, 0 0; 
    } 

    ::-webkit-scrollbar-button:vertical:decrement:hover { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-hover.png); 
    } 

    ::-webkit-scrollbar-button:vertical:decrement:active { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-active.png); 
    } 

    ::-webkit-scrollbar-button:vertical:decrement:window-inactive { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-decrement-arrow.png), url(resources/vertical-button-background-inactive.png); 
    } 

    ::-webkit-scrollbar-button:vertical:increment { 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background.png); 
     background-repeat: no-repeat, repeat-y; 
     background-position: 3px 8px, 0 0; 
    } 

    ::-webkit-scrollbar-button:vertical:increment:hover { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-hover.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-hover.png); 
    } 

    ::-webkit-scrollbar-button:vertical:increment:active { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-active.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-active.png); 
    } 

    ::-webkit-scrollbar-button:vertical:increment:window-inactive { 
     -webkit-border-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-button-inactive.png) 2 0 2 0; 
     background-image: url(http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/resources/vertical-increment-arrow.png), url(resources/vertical-button-background-inactive.png); 
    } 

    ::-webkit-scrollbar-button:double-button:vertical:start:decrement, 
    ::-webkit-scrollbar-button:vertical:start:decrement, 
    { 
     height: 14px; 
     border-bottom-width: 0; 
     background-position: 3px 3px, 0 0; 
    } 

    ::-webkit-scrollbar-button:double-button:vertical:start:increment, 
    ::-webkit-scrollbar-button:vertical:start:increment{ 
     background-position: 3px 4px, 0 0; 
    } 

    ::-webkit-scrollbar-button:double-button:vertical:end:decrement, 
    { 
     background-position: 3px 8px, 0 0; 
    } 

    ::-webkit-scrollbar-button:double-button:vertical:end:increment { 
     height: 14px; 
     border-top-width: 0; 
     background-position: 3px 4px, 0 0; 
    } 

    ::-webkit-scrollbar-button:vertical:end:increment:corner-present { 
     border-bottom-width: 0; 
     height: 19px; 
    } 

    ::-webkit-scrollbar-button:double-button:vertical:end:increment:corner-present, 
    ::-webkit-scrollbar-button:vertical:end:increment:corner-present { 
     height: 13px; 
    }  
</style> 
<body class="double-start"> 
enter code here 
</body>

來源

2012-02-20 04:49:12

非常感謝。這真的很棒。 :) – hasancse016 2015-06-17 05:02:12

如何自定義自定義滾動？

回答

相關問題