纯CSS实现滚动Div边缘渐变的优化方案及替代方法问询

你的现有实现虽然能达成效果，但依赖绝对定位的独立元素，需要手动计算位置参数，调整容器布局时得同步修改多个值，确实麻烦。下面是更易维护的纯CSS优化方案，不用额外DOM节点，渐变层会自动跟随容器位置变化：

优化后代码 #

CSS 代码 #

:root {
  --container-width: 90%;
  --container-height: 10rem;
  --fade-height: 2rem;
  --container-bg: bisque;
  --fade-start-color: #fff;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.scroll-container {
  width: var(--container-width);
  height: var(--container-height);
  overflow-y: auto;
  background-color: var(--container-bg);
  position: relative; /* 关键：让伪元素基于容器定位 */
  padding: 0;
}

/* 顶部渐变伪元素 */
.scroll-container::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fade-height);
  background: linear-gradient(
    180deg,
    var(--fade-start-color) 0%,
    var(--fade-start-color) 30%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
}

/* 底部渐变伪元素 */
.scroll-container::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--fade-height);
  background: linear-gradient(
    0deg,
    var(--fade-start-color) 0%,
    var(--fade-start-color) 30%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
}

/* 内容区稍微下移，避免被顶部渐变完全遮挡 */
.scroll-container > * {
  position: relative;
  z-index: 0;
  margin-top: calc(var(--fade-height) * -1);
  padding-top: var(--fade-height);
}

HTML 代码 #

<div class="scroll-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</div>

核心优化点 #

• 去掉冗余DOM节点：用容器的::before和::after伪元素实现渐变层，不用额外的.topEdge/.btmEdge节点
• 自动跟随容器布局：容器设置position: relative，伪元素用sticky定位+left/right: 0自动匹配容器宽度，无需手动计算calc值
• 统一变量管理：所有可配置参数（容器尺寸、渐变高度、颜色）都放在:root变量里，修改时只改一处即可
• 不遮挡滚动条：渐变层宽度自动适配容器内容区，不会覆盖滚动条，符合你的需求
• 内容无遮挡：通过负margin和padding调整内容位置，避免顶部内容被渐变层完全挡住

内容的提问来源于stack exchange，提问作者Dreamer64