滚动提示

滚动条是一种常见的界面控件，用来提示一个元素除了可以看到的内容之外，还包含了更多内容。但是，它往往太过笨重，在视觉上喧宾夺主，因此现代操作系统已经开始简化它的外观，当用户不与可滚动的元素交互时，滚动条就会被完全隐藏。

epub_26211795_377.jpg

这个容器内包含了很多内容，是可以滚动的；但如果不跟它交互，你就不会知道尽管我们现在已经很少通过滚动条来滚动页面了（更多的是使用触摸手势），但滚动条对于元素内容可滚动的提示作用仍然是十分有用的，哪怕对于那些没有发生交互的元素也是如此；而且这种提示方式十分巧妙。

解决方案

让我们首先从一段简单的结构代码开始，一个带有示意性内容（都是一些极客范的猫名）的普通无序列表：

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