滾動(dòng)條是一種常見的界面控件，用來(lái)提示一個(gè)元素除了可以看到的內(nèi)容之外，還包含了更多內(nèi)容。但是，它往往太過笨重，在視覺上喧賓奪主，因此現(xiàn)代操作系統(tǒng)已經(jīng)開始簡(jiǎn)化它的外觀，當(dāng)用戶不與可滾動(dòng)的元素交互時(shí)，滾動(dòng)條就會(huì)被完全隱藏。

epub_26211795_377.jpg

這個(gè)容器內(nèi)包含了很多內(nèi)容，是可以滾動(dòng)的；但如果不跟它交互，你就不會(huì)知道盡管我們現(xiàn)在已經(jīng)很少通過滾動(dòng)條來(lái)滾動(dòng)頁(yè)面了（更多的是使用觸摸手勢(shì)），但滾動(dòng)條對(duì)于元素內(nèi)容可滾動(dòng)的提示作用仍然是十分有用的，哪怕對(duì)于那些沒有發(fā)生交互的元素也是如此；而且這種提示方式十分巧妙。

解決方案

讓我們首先從一段簡(jiǎn)單的結(jié)構(gòu)代碼開始，一個(gè)帶有示意性內(nèi)容（都是一些極客范的貓名）的普通無(wú)序列表：

html

//html
<ul>
      <li>Ada Catlace</li>
      <li>Alan Purring</li>
      <li>Schr?dingcat</li>
      <li>Tim Purrners-Lee</li>
      <li>WebKitty</li>
      <li>Json</li>
      <li>Void</li>
      <li>Neko</li>
      <li>NaN</li>
      <li>Cat5</li>
      <li>Vector</li>
    </ul>

css

 ul {
        display: inline-block;
        overflow: auto;
        width: 7.2em;
        height: 7em;
        border: 1px solid silver;
        padding: 0.3em 0.5em;
        list-style: none;
        margin-top: 2em;
        font: 100 200%/1.6 "Frutiger LT Std", sans-serif;
        background: linear-gradient(white 15px, hsla(0, 0%, 100%, 0)) 0 0 / 100%
            50px,
          radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%) 0 0 /
            100% 15px,
          linear-gradient(to top, white 15px, hsla(0, 0%, 100%, 0)) bottom /
            100% 50px,
          radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom /
            100% 15px;
        background-repeat: no-repeat;
        background-attachment: local, scroll, local, scroll;
        margin-top: 30px;
      }

采用了偽元素 的 版本

html

 <ul>
        <li>Ada Catlace</li>
        <li>Alan Purring</li>
        <li>Schr?dingcat</li>
        <li>Tim Purrners-Lee</li>
        <li>WebKitty</li>
        <li>Json</li>
        <li>Void</li>
        <li>Neko</li>
        <li>NaN</li>
        <li>Cat5</li>
        <li>Vector</li>
      </ul>

css

 <style>
      .scrollbox {
        position: relative;
        z-index: 1;
        overflow: auto;
        width: 200px;
        max-height: 200px;
        margin: 50px auto;
        background-repeat: no-repeat;
        background-image: radial-gradient(
            farthest-side at 50% 0,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
          ),
          radial-gradient(
            farthest-side at 50% 100%,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
          );
        background-position: 0 0, 0 100%;
        background-size: 100% 14px;
      }
      .scrollbox:before,
      .scrollbox:after {
        content: "";
        position: relative;
        z-index: -1;
        display: block;
        height: 30px;
        margin: 0 0 -30px;
        background: linear-gradient(
          to bottom,
          #fff,
          #fff 30%,
          rgba(255, 255, 255, 0)
        );
      }
      .scrollbox:after {
        margin: -30px 0 0;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0),
          #fff 70%,
          #fff
        );
      }
    </style>

效果

屏幕截圖 2022-09-22 213043.png