2013-10-24 86 views
5

我想製作透明的滾動條,該滾動條應該放置在div內容中。 只有css和唯一的webkit瀏覽器。 它看起來像example。我的code。問題在於滾動條將內容移動到左側。如何使它看起來像在例子中?謝謝你的回覆。內容滾動條

div{ 
  width:410px; 
  height:100px; 
  overflow-y:scroll; 
  border:1px solid green; 
  position:relative; 
} 

::-webkit-scrollbar{ 
  width:20px; 
  position:absolute; 
  right:20px; 
  z-index:100; 
}  

::-webkit-scrollbar-thumb{ 
  background-color:rgba(0,0,0,1); 
  border-right:10px solid white; 
}   
+0

你應該包括代碼到你的問題,並提供一個鏈接到一個jsFiddle.net片段。 – akluth

+2

你不能這樣做**只有css和只有webkit瀏覽器**!你應該使用'javascript'或'jquery' .. – mehdi

+0

[Custom CSS Scrollbar for Firefox]的可能重複(http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox) – 99tharun

回答

0

這與示例非常相似。

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

::-webkit-scrollbar-thumb{ 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
    border: 1px solid #fff; 
} 

否則,您必須使用iscroll plugin