::-webkit-scrollbar

::-webkit-scrollbar CSS ä¼ªç±»åç´ ä¼å½±åè®¾ç½®äº overflow:scroll; çåç´ çæ»å¨æ¡æ ·å¼ã

å¤æ³¨ï¼::-webkit-scrollbar ä»å¨åºäº Blink æ WebKit çæµè§å¨ï¼ä¾å¦ï¼ChromeãEdgeãOperaãSafariãiOS ä¸ææçæµè§å¨ï¼ä»¥åå¶ä»åºäº WebKit çæµè§å¨ï¼ä¸å¯ç¨ãæ»å¨æ¡æ ·å¼çæ åæ¹æ³å¯ç¨äº scrollbar-color å scrollbar-widthã

CSS æ»å¨æ¡éæ©å¨

::-webkit-scrollbarââæ´ä¸ªæ»å¨æ¡ã
::-webkit-scrollbar-buttonââæ»å¨æ¡ä¸çæé®ï¼ä¸ä¸ç®å¤´ï¼ã
::-webkit-scrollbar-thumbââæ»å¨æ¡ä¸çæ»å¨æ»åã
::-webkit-scrollbar-trackââæ»å¨æ¡è½¨éã
::-webkit-scrollbar-track-pieceââæ»å¨æ¡æ²¡ææ»åçè½¨éé¨åã
::-webkit-scrollbar-cornerââå½åæ¶æåç´æ»å¨æ¡åæ°´å¹³æ»å¨æ¡æ¶äº¤æ±çé¨åãéå¸¸æ¯æµè§å¨çªå£çå³ä¸è§ã
::-webkit-resizerââåºç°å¨æäºåç´ åºè§çå¯æå¨è°æ´å¤§å°çæ»åã

ç¤ºä¾

CSS

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;
}

HTML

html

<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weeeeird?
</div>