{"id":187,"date":"2021-06-15T10:24:32","date_gmt":"2021-06-15T02:24:32","guid":{"rendered":"http:\/\/blog.ppdd.vip\/?p=187"},"modified":"2021-06-15T10:24:32","modified_gmt":"2021-06-15T02:24:32","slug":"css3%e8%87%aa%e5%ae%9a%e4%b9%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%a0%b7%e5%bc%8f-webkit-scrollbar","status":"publish","type":"post","link":"https:\/\/blog.ppdd.vip\/index.php\/2021\/06\/15\/css3%e8%87%aa%e5%ae%9a%e4%b9%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%a0%b7%e5%bc%8f-webkit-scrollbar\/","title":{"rendered":"CSS3\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u6837\u5f0f -webkit-scrollbar"},"content":{"rendered":"<blockquote><p>\u6709\u6ca1\u6709\u89c9\u5f97\u6d4f\u89c8\u5668\u81ea\u5e26\u7684\u539f\u59cb\u6eda\u52a8\u6761\u5f88\u4e0d\u7f8e\u89c2\uff0c\u540c\u65f6\u4e5f\u6709\u770b\u5230\u5f88\u591a\u7f51\u7ad9\u7684\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u663e\u5f97\u9ad8\u7aef\uff0c\u5c31\u8fdechrome32.0\u5f00\u53d1\u677f\u90fd\u629b\u5f03\u4e86\u539f\u59cb\u7684\u6eda\u52a8\u6761\uff0c\u7f8e\u89c2\u591a\u4e86\u3002\u90a3webkit\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u7684\u5462\uff1f<\/p><\/blockquote>\n<h2 id=\"h2-0\"><a name=\"t0\"><\/a><a name=\"t0\"><\/a>\u524d\u8a00<\/h2>\n<p>webkit\u652f\u6301\u62e5\u6709overflow\u5c5e\u6027\u7684\u533a\u57df\uff0c\u5217\u8868\u6846\uff0c\u4e0b\u62c9\u83dc\u5355\uff0ctextarea\u7684\u6eda\u52a8\u6761\u81ea\u5b9a\u4e49\u6837\u5f0f\uff0c\u6240\u4ee5\u7528\u5904\u8fd8\u662f\u633a\u5927\u7684\u3002\u5f53\u7136\uff0c\u517c\u5bb9\u6240\u6709\u6d4f\u89c8\u5668\u7684\u6eda\u52a8\u6761\u6837\u5f0f\u76ee\u524d\u662f\u4e0d\u5b58\u5728\u7684\u3002<\/p>\n<h2 id=\"h2-1\"><a name=\"t1\"><\/a><a name=\"t1\"><\/a>\u6f14\u793a<\/h2>\n<p>\u6765\u770b\u770b\u8fd92\u4e2a\u6eda\u52a8\u6761demo\uff1a<a href=\"http:\/\/www.xuanfengge.com\/demo\/201311\/scroll\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u00a0demo1\uff08\u56fe\u7247\u7248\uff09<\/a>\u3001<a href=\"http:\/\/www.xuanfengge.com\/demo\/201311\/scroll\/css3-scroll.html\" target=\"_blank\" rel=\"noopener noreferrer\">demo2\uff08\u7eafCSS3\u7248\uff09<\/a><span id=\"more-2836\"><\/span><\/p>\n<h2 id=\"h2-2\"><a name=\"t2\"><\/a><a name=\"t2\"><\/a>\u6eda\u52a8\u6761\u7ec4\u6210<\/h2>\n<ul>\n<li>::-webkit-scrollbar \u6eda\u52a8\u6761\u6574\u4f53\u90e8\u5206<\/li>\n<li>::-webkit-scrollbar-thumb\u00a0\u00a0\u6eda\u52a8\u6761\u91cc\u9762\u7684\u5c0f\u65b9\u5757\uff0c\u80fd\u5411\u4e0a\u5411\u4e0b\u79fb\u52a8\uff08\u6216\u5f80\u5de6\u5f80\u53f3\u79fb\u52a8\uff0c\u53d6\u51b3\u4e8e\u662f\u5782\u76f4\u6eda\u52a8\u6761\u8fd8\u662f\u6c34\u5e73\u6eda\u52a8\u6761\uff09<\/li>\n<li>::-webkit-scrollbar-track\u00a0\u00a0\u6eda\u52a8\u6761\u7684\u8f68\u9053\uff08\u91cc\u9762\u88c5\u6709Thumb\uff09<\/li>\n<li>::-webkit-scrollbar-button \u6eda\u52a8\u6761\u7684\u8f68\u9053\u7684\u4e24\u7aef\u6309\u94ae\uff0c\u5141\u8bb8\u901a\u8fc7\u70b9\u51fb\u5fae\u8c03\u5c0f\u65b9\u5757\u7684\u4f4d\u7f6e\u3002<\/li>\n<li>::-webkit-scrollbar-track-piece \u5185\u5c42\u8f68\u9053\uff0c\u6eda\u52a8\u6761\u4e2d\u95f4\u90e8\u5206\uff08\u9664\u53bb\uff09<\/li>\n<li>::-webkit-scrollbar-corner \u8fb9\u89d2\uff0c\u5373\u4e24\u4e2a\u6eda\u52a8\u6761\u7684\u4ea4\u6c47\u5904<\/li>\n<li>::-webkit-resizer \u4e24\u4e2a\u6eda\u52a8\u6761\u7684\u4ea4\u6c47\u5904\u4e0a\u7528\u4e8e\u901a\u8fc7\u62d6\u52a8\u8c03\u6574\u5143\u7d20\u5927\u5c0f\u7684\u5c0f\u63a7\u4ef6<\/li>\n<\/ul>\n<h2 id=\"h2-3\"><a name=\"t3\"><\/a><a name=\"t3\"><\/a>\u7b80\u6d01\u7248<\/h2>\n<p>\u8fd9\u91cc\u5c31\u4e0d\u8d34\u51fa\u8be6\u7ec6\u4ee3\u7801\u4e86\uff0cdemo\u91cc\u9762\u53ef\u4ee5\u901a\u8fc7\u67e5\u770b\u6e90\u7801\u5bfb\u627e\u5177\u4f53\u6837\u5f0f\u7684\u8bbe\u7f6e\u3002\u6765\u770b\u770bdemo2\u4e2d\u7b2c\u4e8c\u4e2a\u6eda\u52a8\u6761\u7684\u6837\u5f0f<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-css hljs\"><\/code><\/pre>\n<ol class=\"hljs-ln\">\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"1\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u5b9a\u4e49\u6eda\u52a8\u6761\u9ad8\u5bbd\u53ca\u80cc\u666f \u9ad8\u5bbd\u5206\u522b\u5bf9\u5e94\u6a2a\u7ad6\u6eda\u52a8\u6761\u7684\u5c3a\u5bf8*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"2\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"3\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">{<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"4\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">16px<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"5\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">16px<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"6\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#F5F5F5<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"7\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"8\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"9\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u5b9a\u4e49\u6eda\u52a8\u6761\u8f68\u9053 \u5185\u9634\u5f71+\u5706\u89d2*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"10\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar-track<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"11\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">{<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"12\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">-webkit-box-shadow<\/span>: inset <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.3<\/span>);<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"13\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"14\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#F5F5F5<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"15\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"16\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"17\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u5b9a\u4e49\u6ed1\u5757 \u5185\u9634\u5f71+\u5706\u89d2*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"18\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar-thumb<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"19\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">{<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"20\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"21\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">-webkit-box-shadow<\/span>: inset <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,.<span class=\"hljs-number\">3<\/span>);<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"22\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#555<\/span>;<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"23\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<pre><code class=\"language-css hljs\"><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"h2-4\"><a name=\"t4\"><\/a><a name=\"t4\"><\/a>\u8be6\u7ec6\u8bbe\u7f6e<\/h2>\n<p>&nbsp;<\/p>\n<p>\u5b9a\u4e49\u6eda\u52a8\u6761\u5c31\u662f\u5229\u7528\u4f2a\u5143\u7d20\u4e0e\u4f2a\u7c7b\uff0c\u90a3\u4ec0\u4e48\u662f\u4f2a\u5143\u7d20\u548c\u4f2a\u7c7b\u5462\uff1f<\/p>\n<p>\u4f2a\u7c7b\u5927\u5bb6\u5e94\u8be5\u5f88\u719f\u6089:link,:focus,:hover\uff0c\u6b64\u5916CSS3\u4e2d\u53c8\u589e\u52a0\u4e86\u8bb8\u591a\u4f2a\u7c7b\u9009\u62e9\u5668\uff0c\u5982:nth-child\uff0c:last-child\uff0c:nth-last-of-type()\u7b49\u3002<\/p>\n<p>CSS\u4e2d\u7684\u4f2a\u5143\u7d20\u5927\u5bb6\u4ee5\u524d\u770b\u8fc7\uff1a:first-line,:first-letter,:before,:after\u3002\u90a3\u4e48\u5728CSS3\u4e2d\uff0c\u4f2a\u5143\u7d20\u8fdb\u884c\u4e86\u8c03\u6574\uff0c\u5728\u4ee5\u524d\u7684\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u4e00\u4e2a\u201c\uff1a\u201d\u4e5f\u5c31\u662f\u73b0\u5728\u53d8\u6210\u4e86\u201c::first-letter,::first-line,::before,::after\u201d\uff0c\u53e6\u5916CSS3\u8fd8\u589e\u52a0\u4e86\u4e00\u4e2a\u201c::selection\u201d\u3002\u4e24\u4e2a\u201c\uff1a\uff1a\u201d\u548c\u4e00\u4e2a\u201c\uff1a\u201d\u5728css3\u4e2d\u4e3b\u8981\u7528\u6765\u533a\u5206\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u3002<\/p>\n<p>webkit\u7684\u4f2a\u7c7b\u548c\u4f2a\u5143\u7d20\u7684\u5b9e\u73b0\u5f88\u5f3a\uff0c\u53ef\u4ee5\u628a\u6eda\u52a8\u6761\u5f53\u6210\u4e00\u4e2a\u9875\u9762\u5143\u7d20\u6765\u5b9a\u4e49\uff0c\u518d\u7ed3\u5408\u4e00\u4e9b\u9ad8\u7ea7\u7684CSS3\u5c5e\u6027\uff0c\u6bd4\u5982\u6e10\u53d8\u3001\u5706\u89d2\u3001RGBa\u7b49\u7b49\u3002\u7136\u540e\u5982\u679c\u6709\u4e9b\u5730\u65b9\u8981\u7528\u56fe\u7247\uff0c\u53ef\u4ee5\u628a\u56fe\u7247\u4e5f\u53ef\u4ee5\u8f6c\u6362\u6210Base64\uff0c\u4e0d\u7136\u6bcf\u6b21\u90fd\u5f97\u52a0\u8f7d\u90a3\u4e2a\u591a\u4e2a\u56fe\u7247\uff0c\u589e\u52a0\u8bf7\u6c42\u6570\u3002<\/p>\n<p>\u4efb\u4f55\u5bf9\u8c61\u90fd\u53ef\u4ee5\u8bbe\u7f6e\uff1a\u8fb9\u6846\u3001\u9634\u5f71\u3001\u80cc\u666f\u56fe\u7247\u7b49\u7b49\uff0c\u521b\u5efa\u7684\u6eda\u52a8\u6761\u4efb\u7136\u4f1a\u6309\u7167\u64cd\u4f5c\u7cfb\u7edf\u672c\u8eab\u7684\u8bbe\u7f6e\u6765\u5b8c\u6210\u5176\u4ea4\u4e92\u7684\u884c\u4e3a\u3002\u4e0b\u9762\u7684\u4f2a\u7c7b\u53ef\u4ee5\u5e94\u7528\u5230\u4e0a\u9762\u7684\u4f2a\u5143\u7d20\u4e2d\u3002\u6709\u70b9\u5c0f\u590d\u6742\uff0c\u5177\u4f53\u600e\u4e48\u5199\u53ef\u4ee5\u770b\u7b2c\u4e00\u4e2ademo\uff0c\u90a3\u91cc\u4e5f\u6709\u6ce8\u91ca\u3002<\/p>\n<pre><code class=\"language-css hljs\"><\/code><\/pre>\n<ol class=\"hljs-ln\">\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"1\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:horizontal<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"2\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">horizontal<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u4efb\u4f55\u6c34\u5e73\u65b9\u5411\u4e0a\u7684\u6eda\u52a8\u6761<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"3\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"4\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:vertical<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"5\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">vertical<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u4efb\u4f55\u5782\u76f4\u65b9\u5411\u7684\u6eda\u52a8\u6761<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"6\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"7\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:decrement<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"8\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">decrement<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u8868\u793a\u9012\u51cf\u7684\u6309\u94ae\u6216\u8f68\u9053\u788e\u7247\uff0c\u4f8b\u5982\u53ef\u4ee5\u4f7f\u533a\u57df\u5411\u4e0a\u6216\u8005\u5411\u53f3\u79fb\u52a8\u7684\u533a\u57df\u548c\u6309\u94ae<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"9\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"10\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:increment<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"11\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">increment<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u8868\u793a\u9012\u589e\u7684\u6309\u94ae\u6216\u8f68\u9053\u788e\u7247\uff0c\u4f8b\u5982\u53ef\u4ee5\u4f7f\u533a\u57df\u5411\u4e0b\u6216\u8005\u5411\u5de6\u79fb\u52a8\u7684\u533a\u57df\u548c\u6309\u94ae<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"12\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"13\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:start<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"14\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">start<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u8868\u793a\u5bf9\u8c61\uff08\u6309\u94ae \u8f68\u9053\u788e\u7247\uff09\u662f\u5426\u653e\u5728\u6ed1\u5757\u7684\u524d\u9762<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"15\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"16\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:end<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"17\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">end<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u8868\u793a\u5bf9\u8c61\uff08\u6309\u94ae \u8f68\u9053\u788e\u7247\uff09\u662f\u5426\u653e\u5728\u6ed1\u5757\u7684\u540e\u9762<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"18\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"19\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:double-button<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"20\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">double-button<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u5224\u65ad\u8f68\u9053\u7ed3\u675f\u7684\u4f4d\u7f6e\u662f\u5426\u662f\u4e00\u5bf9\u6309\u94ae\u3002\u4e5f\u5c31\u662f\u8f68\u9053\u788e\u7247\u7d27\u6328\u7740\u4e00\u5bf9\u5728\u4e00\u8d77\u7684\u6309\u94ae\u3002<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"21\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"22\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:single-button<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"23\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">single-button<\/span>\u4f2a\u7c7b\u9002\u7528\u4e8e\u6309\u94ae\u548c\u8f68\u9053\u788e\u7247\u3002\u5224\u65ad\u8f68\u9053\u7ed3\u675f\u7684\u4f4d\u7f6e\u662f\u5426\u662f\u4e00\u4e2a\u6309\u94ae\u3002\u4e5f\u5c31\u662f\u8f68\u9053\u788e\u7247\u7d27\u6328\u7740\u4e00\u4e2a\u5355\u72ec\u7684\u6309\u94ae\u3002<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"24\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"25\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:no-button<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"26\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-tag\">no-button<\/span>\u4f2a\u7c7b\u8868\u793a\u8f68\u9053\u7ed3\u675f\u7684\u4f4d\u7f6e\u6ca1\u6709\u6309\u94ae\u3002<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"27\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"28\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:corner-present<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"29\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/<span class=\"hljs-selector-tag\">corner-present<\/span>\u4f2a\u7c7b\u8868\u793a\u6eda\u52a8\u6761\u7684\u89d2\u843d\u662f\u5426\u5b58\u5728\u3002<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"30\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"31\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">:window-inactive<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"32\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">\/\/\u9002\u7528\u4e8e\u6240\u6709\u6eda\u52a8\u6761\uff0c\u8868\u793a\u5305\u542b\u6eda\u52a8\u6761\u7684\u533a\u57df\uff0c\u7126\u70b9\u4e0d\u5728\u8be5\u7a97\u53e3\u7684\u65f6\u5019\u3002<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"33\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"34\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar-track-piece<\/span><span class=\"hljs-selector-pseudo\">:start<\/span> {<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"35\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u6eda\u52a8\u6761\u4e0a\u534a\u8fb9\u6216\u5de6\u534a\u8fb9*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"36\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"37\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"38\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar-thumb<\/span><span class=\"hljs-selector-pseudo\">:window-inactive<\/span> {<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"39\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u5f53\u7126\u70b9\u4e0d\u5728\u5f53\u524d\u533a\u57df\u6ed1\u5757\u7684\u72b6\u6001*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"40\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"41\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"42\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-selector-pseudo\">::-webkit-scrollbar-button<\/span><span class=\"hljs-selector-pseudo\">:horizontal<\/span><span class=\"hljs-selector-pseudo\">:decrement<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {<\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"43\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\"><span class=\"hljs-comment\">\/*\u5f53\u9f20\u6807\u5728\u6c34\u5e73\u6eda\u52a8\u6761\u4e0b\u9762\u7684\u6309\u94ae\u4e0a\u7684\u72b6\u6001*\/<\/span><\/div>\n<\/div>\n<\/li>\n<li>\n<div class=\"hljs-ln-numbers\">\n<div class=\"hljs-ln-line hljs-ln-n\" data-line-number=\"44\"><\/div>\n<\/div>\n<div class=\"hljs-ln-code\">\n<div class=\"hljs-ln-line\">}<\/div>\n<\/div>\n<\/li>\n<\/ol>\n<pre><code class=\"language-css hljs\"><\/code><\/pre>\n<p>\u539f\u6587\u5730\u5740\uff1ahttp:\/\/www.xuanfengge.com\/css3-webkit-scrollbar.html<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6709\u6ca1\u6709\u89c9\u5f97\u6d4f\u89c8\u5668\u81ea\u5e26\u7684\u539f\u59cb\u6eda\u52a8\u6761\u5f88\u4e0d\u7f8e\u89c2\uff0c\u540c\u65f6\u4e5f\u6709\u770b\u5230\u5f88\u591a\u7f51\u7ad9\u7684\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u663e\u5f97\u9ad8\u7aef\uff0c\u5c31\u8fdechrome32.0&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-187","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/posts\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":0,"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/posts\/187\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/categories?post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ppdd.vip\/index.php\/wp-json\/wp\/v2\/tags?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}