Question

我想在导航div中添加“overflow：scroll”，但是Windows上的默认滚动条很可怕。

没有简单的方法来设置滚动条的样式而不下载额外的javascrip库，API等吗？

Answer 1

这篇文章很好地描述了webkit浏览器中滚动条的CSS3样式。

http://css-tricks.com/custom-scrollbars-in-webkit/

对于跨浏览器解决方案，您必须使用JS库，例如：http://jscrollpane.kelvinluck.com/

Answer 2

你可以用webkit做点什么。

这是滚动条的主要元素

::-webkit-scrollbar             
::-webkit-scrollbar-button       
::-webkit-scrollbar-track      
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb       
::-webkit-scrollbar-corner       
::-webkit-resizer

以下是滚动条的状态

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

让我们说：

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

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px #CCC; 
    border-radius: 5px;
}

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

希望它有所帮助。

Answer 3

他们的方法很少如果你需要支持所有浏览器，你应该去寻找像Nicescroll

这样的插件

在你认为它与支持firefox无关的情况下然后你可以使用这些

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    margin: 10px;
    padding-bottom: 10px;
}
::-webkit-scrollbar-track {
    background: #E6E6E6;
    height:8px;
    width: 8px;
    border-radius: 8px;
    margin: 10px;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    height:8px;
    width: 8px;
    border-radius: 8px;
    cursor:pointer;
    margin: 10px;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #ccc; 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* IE SPECIFIC */
body{
  scrollbar-base-color: #aaa;
  scrollbar-3dlight-color: #aaa;
  scrollbar-highlight-color: #aaa;
  scrollbar-track-color: #e6e6e6;
  scrollbar-arrow-color: #ccc;
  scrollbar-shadow-color: #aaa;
  scrollbar-dark-shadow-color: #aaa;
}

Answer 4

滚动条的样式不是标准化的，因此不是跨浏览器。话虽如此，大多数浏览器都支持它们。

看看这个答案：

CSS customized scroll bar in div

是否有一种简单的方式来设置滚动条的样式

4 个答案: