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滚动条问题

回答

相关问题