div上的CSS3滾動條樣式

我的意思是這些屬性

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

這是我div標籤

<div class="scroll"></div>

這是我目前的CSS

.scroll { 
    width: 200px; height: 400px; 
    overflow: hidden; 
}

來源

2012-09-09 2619

'overflow：hidden'隱藏了任何滾動條，所以沒有什麼可以用CSS3來裝飾。你必須使滾動條可見與'overflow：scroll'或'overflow：auto' – keaukraine

設置overflow: hidden隱藏滾動條。設置overflow: scroll以確保滾動條始終顯示。

要使用::webkit-scrollbar屬性，只需在調用它之前指定.scroll即可。

.scroll { 
    width: 200px; 
    height: 400px; 
    background: red; 
    overflow: scroll; 
} 
.scroll::-webkit-scrollbar { 
    width: 12px; 
} 

.scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

.scroll::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

看到這個現場example

來源

2012-09-09 09:04:25 jacktheripper

謝謝你的工作。有沒有辦法可以爲mozilla瀏覽器做同樣的事情？ – 2619

不是沒有jQuery/JavaScript。看到這個問題http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – jacktheripper

.scroll { 
    width: 200px; height: 400px; 
    overflow: auto; 
}

來源

2012-09-09 09:04:38

你設置overflow: hidden。這會隱藏任何對於<div>來說太大的內容，這意味着不會顯示滾動條。給你的<div>一個明確的寬度和/或高度，並改變overflow到auto：

.scroll { 
    width: 200px; 
    height: 400px; 
    overflow: scroll; 
}

如果你只是想顯示滾動條如果內容比<div>長，改變overflow到overflow: auto。您也只能使用overflow-y或overflow-x顯示一個滾動條。

來源

2012-09-09 09:08:02 Bojangles

css3滾動條的問題在於，交互只能在內容上執行。我們無法與觸控設備上的滾動條進行交互。

來源

2014-10-14 04:48:35 user2845300

div上的CSS3滾動條樣式

回答

相關問題