initial commit

1 files changed, 80 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html
new file mode 100644
index 0000000000..ba62442d9e
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html
@@ -0,0 +1,80 @@
+---
+title: '::-webkit-scrollbar'
+slug: 'Web/CSS/::-webkit-scrollbar'
+tags:
+  - '::-webkit-scrollbar'
+  - CSS
+  - 'CSS:WebKit Extensions'
+translation_of: 'Web/CSS/::-webkit-scrollbar'
+---
+<p>{{Draft()}}{{CSSRef}}{{Non-standard_header}}</p>
+
+<h2 id="描述">描述</h2>
+
+<p>这个 <font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar</font> CSS伪类选择器影响了一个元素的滚动条的样式</p>
+
+<div class="note">
+<p><code>::-webkit-scrollbar</code> 仅仅在支持<a class="external external-icon" href="https://webkit.org" title="https://webkit.org">WebKit</a>的浏览器<span style="font-size: 85%;"> (例如, 谷歌Chrome, 苹果Safari)可以使用</span>.</p>
+</div>
+
+<h2 id="CSS滚动条选择器">CSS滚动条选择器</h2>
+
+<p>你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:</p>
+
+<ul>
+ <li><code>::-webkit-scrollbar</code> — 整个滚动条.</li>
+ <li><code>::-webkit-scrollbar-button</code> — 滚动条上的按钮 (上下箭头).</li>
+ <li><code>::-webkit-scrollbar-thumb</code> — 滚动条上的滚动滑块.</li>
+ <li><code>::-webkit-scrollbar-track</code> — 滚动条轨道.</li>
+ <li><code>::-webkit-scrollbar-track-piece</code> — 滚动条没有滑块的轨道部分.</li>
+ <li><code>::-webkit-scrollbar-corner</code> — 当同时有垂直滚动条和水平滚动条时交汇的部分.</li>
+ <li><code>::-webkit-resizer</code> — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).</li>
+</ul>
+
+<h2 id="语法">语法</h2>
+
+<pre><font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar { <em>styles here</em> }</font>
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+  height: 2em;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Demonstrate a "mostly customized" scrollbar
+ * (won't be visible otherwise if width/height is specified) */
+.mostly-customized-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: #aaa; /* or add it to the track */
+}
+/* Add a thumb */
+.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+&lt;div class="mostly-customized-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;br&gt;
+And pretty tall&lt;br&gt;
+thing with weird scrollbars.&lt;br&gt;
+Who thought scrollbars could be made weeeeird?&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>WebKit论坛 <a href="https://webkit.org/blog/363/styling-scrollbars/">Styling Scrollbars</a></li>
+ <li><a href="https://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html">WebKit test</a> for scrollbar styles mentioned above</li>
+ <li>{{cssxref('-ms-overflow-style')}}</li>
+</ul>