如何仅使用CSS为图片列表实现滚动阴影效果？

我最近改了个超赞的图片布局，原本想给它加个最大高度让内容能滚动，还想让滚动条一直显示，提示用户下面还有内容。谁知道这事儿比我想的麻烦多了——毕竟浏览器和系统都会自带滚动条样式，不好直接控制。后来我索性换了个方案，用滚动阴影来提示可滚动，效果还不错，下面是完整的实现代码：

核心CSS代码 #

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 

figcaption { 
  text-align: center; 
} 

figure.gallery ul { 
  border: 1px red solid; 
  max-width: 80%; 
  height: 50vh; 
  margin: 0 auto; 
  overflow-y: scroll; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.2em; 
  list-style-type: none; 
} 

figure.gallery ul li { 
  height: 40vh; 
  flex-grow: 1; 
} 

figure.gallery ul li:last-child { 
  flex-grow: 10; 
} 

figure.gallery ul li img { 
  max-height: 100%; 
  min-width: 100%; 
  object-fit: cover; 
  vertical-align: bottom; 
} 

// 宽屏适配
@media (max-aspect-ratio: 1/1) { 
  figure.gallery ul li { 
    height: 30vh; 
  } 
} 

// 短屏适配
@media (max-height: 480px) { 
  figure.gallery ul li { 
    height: 80vh; 
  } 
} 

// 竖屏小屏幕适配
@media (max-aspect-ratio: 1/1) and (max-width: 480px) { 
  figure.gallery ul { 
    flex-direction: row; 
  } 
  figure.gallery ul li { 
    height: auto; 
    width: 100%; 
  } 
  figure.gallery ul li img { 
    width: 100%; 
    max-height: 75vh; 
    min-width: 0; 
  } 
} 

// 滚动阴影核心类
.scrollGradient { 
  background: linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)), 
              linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%, 
              radial-gradient(farthest-side at 50% 0, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)), 
              radial-gradient(farthest-side at 50% 100%, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)) 0 100%; 
  background-color: #ffffff; 
  background-repeat: no-repeat; 
  background-attachment: local, local, scroll, scroll; 
  background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px; 
}

对应的HTML结构 #

<header> 
  <h1>Gallery</h1> 
</header> 
<figure class="gallery"> 
  <ul class="scrollGradient"> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" alt="Interesting living room light through a window" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg" alt="Empty bike racks outside a hotel" loading="lazy" /> 
      </a> 
    </li> 
    <li> 
      <a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" > 
        <img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy" /> 
      </a> 
    </li> 
  </ul> 
</figure>

实现小细节 #

• 滚动阴影的核心是.scrollGradient类，通过多层渐变组合实现了随滚动位置变化的顶部、底部阴影，比固定阴影更能引导用户注意到可滚动区域
• 图片布局用Flex实现了自适应排列，配合多组媒体查询，在不同屏幕尺寸下都能自动调整图片大小和排列方向，保证显示效果
• 给滚动容器设置overflow-y: scroll确保内容超出时触发滚动，搭配滚动阴影完全替代了默认滚动条的提示作用

内容来源于stack exchange