0

我有以下样式表，它改变了网络浏览器滚动条的颜色。但问题是它改变了所有滚动条，包括浏览器的主滚动条。

我只想将此应用于溢出区域。谢谢

例如，

<div style="overflow: scroll">this area</div>

/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-button:vertical {
    background-color: red;
    border: 1px dashed blue;
}

/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    background-color: black;
    border: 1px dashed blue;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    background-color: purple;
    border: 1px dashed blue;
}

::-webkit-scrollbar-track:vertical {
    background-color: blue;
    border: 1px dashed pink;
}

/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    border: 1px solid #000;
}

/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    border: 1px dashed pink;
}

/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: green;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: yellow;
}

/* Corner */
::-webkit-scrollbar-corner:vertical {
    background-color: black;
}

/* Resizer */
::-webkit-scrollbar-resizer:vertical {
    background-color: gray;
}
4

1 回答 1

2

见http://jsfiddle.net/Bghcr/1/

  • 给要应用样式的元素一个类名
  • 使用类名缩小滚动条选择器的范围

HTML

<div class="custom-scroll">this area</div>​

CSS

.custom-scroll {
    width: 300px;
    height: 300px;
    overflow: scroll;
    border: 1px solid silver;
}

.custom-scroll::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

.custom-scroll::-webkit-scrollbar-button:vertical {
    background-color: red;
    border: 1px dashed blue;
}

/* ETC */

其他注意事项

  • <div class="overflow: scroll">是无效的——也许你的意思是<div style="overflow:scroll">？
  • CSS 选择器参考 - http://www.w3.org/TR/selectors/
于 2012-05-15T00:24:59.363 回答