webkit瀏覽器自定義CSS滾動條問題

我創建了一個自定義滾動條，似乎在Firefox上工作正常，但我有一個問題，我的滾動出現在WebKit瀏覽器的屏幕上。 Click here webkit瀏覽器自定義CSS滾動條問題

#product-desc{ 
     top: 270px; 
     left: 20px; 
     right: 20px; 
     bottom: 20px; 
     height: 90px; 
     max-width: 350px; 
     overflow-x: hidden; 
     overflow-y: scroll; 
    } 


    #product-desc :: -webkit-scrollbar{ 
     width: 12px; 
    } 

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

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

有誰知道我可以解決這個問題？

來源

2012-09-05 NewBoy

自定義滾動條是*超級*糟糕的主意，你應該避免使用它們。 – meagar

這是爲什麼？大多數瀏覽器不支持？ – NewBoy

由於滾動區域內滾動區域的用戶體驗非常糟糕。瀏覽器窗口已經有一個滾動條。你應該讓它做它的工作。 – meagar

這些是僞元素本身。滾動條的實際部分。

::-webkit-scrollbar    { /* 1 */ } 
::-webkit-scrollbar-button  { /* 2 */ } 
::-webkit-scrollbar-track  { /* 3 */ } 
::-webkit-scrollbar-track-piece { /* 4 */ } 
::-webkit-scrollbar-thumb  { /* 5 */ } 
::-webkit-scrollbar-corner  { /* 6 */ } 
::-webkit-resizer    { /* 7 */ }

你可以看看Custom Scrollbars in WebKit

你也可以去通過Styling scrollbars the Webkit way - CSS3

來源

2012-09-05 16:25:21

webkit瀏覽器自定義CSS滾動條問題

回答

相關問題