滚动提示

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

epub_26211795_377.jpg

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

解决方案

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

html

//html

      
Ada Catlace
      
Alan Purring
      
Schrödingcat
      
Tim Purrners-Lee
      
WebKitty
      
Json
      
Void
      
Neko
      
NaN
      
Cat5
      
Vector
    

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

 

        
Ada Catlace
        
Alan Purring
        
Schrödingcat
        
Tim Purrners-Lee
        
WebKitty
        
Json
        
Void
        
Neko
        
NaN
        
Cat5
        
Vector
      

css

效果

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