如何仅用纯CSS实现内容溢出时才显示「向下滚动」提示？

Lea Verou滚动阴影方案的当前兼容性 #

你提到的这个2012年的方案现在完全可用，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持background-attachment: local以及CSS渐变属性，降级逻辑也符合预期，内容没有溢出时不会显示阴影。

能否用background-attachment: local控制其他DOM元素的属性 #

不能。background-attachment是作用于当前元素背景的样式规则，CSS没有提供基于背景显示状态触发其他元素样式变化的选择器逻辑，无法直接通过这个特性控制其他元素的display、visibility或opacity属性。

纯CSS实现「仅溢出时显示向下滚动提示」的方案 #

如果你要实现目标效果，可以直接沿用该方案的思路，把提示图案整合到背景层中，示例代码如下：

.scrollbox {
  overflow: auto;
  width: 300px;
  max-height: 200px;
  padding: 1rem;
  background:
    /* 顶部遮挡层，滚动时露出顶部阴影 */
    linear-gradient(white 30%, rgba(255,255,255,0)),
    /* 底部遮挡层，默认遮挡向下提示，滚动后露出 */
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    /* 顶部阴影 */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    /* 底部提示占位层，滚动时露出箭头 */
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 0 100%,
    /* 向下箭头图案，也可以替换为base64格式的自定义图标 */
    conic-gradient(from 135deg at 50% 60%, rgba(0,0,0,0) 75%, #666 0) 50% 100% / 20px 20px no-repeat;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 40px, 100% 30px;
  background-attachment: local, local, scroll, scroll, scroll;
}

如果需要使用独立的DOM元素作为提示，可以结合较新的CSS特性实现，示例逻辑如下：

.scrollbox {
  position: relative;
  overflow: auto;
  width: 300px;
  max-height: 200px;
}
.scroll-tip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: show-tip linear both;
  animation-timeline: scroll(self block);
  animation-range: 0 10px;
}
@keyframes show-tip {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 内容未溢出时隐藏提示 */
.scrollbox:not(:has(::-webkit-scrollbar)) .scroll-tip {
  display: none;
}

注：滚动驱动动画和:has()选择器属于较新的CSS特性，需要根据你的兼容场景选择使用。

内容的提问来源于stack exchange，提问作者ruben.moor