为双向滚动Div添加带滚动条偏移的四边渐变遮罩

核心思路 #

通过多层CSS Mask叠加，分别处理内容区域的四边缘渐变、右侧垂直滚动条的实心保留、底部水平滚动条的实心保留以及右下角滚动条交叉区域的实心保留，确保滚动条完全可见且不被渐变遮罩影响。

修改后的代码 #

CSS

.visible {
  height: 10rem;
  width: 20rem;
  overflow: auto;
  padding: 1.125rem;
}

.masked-overflow {
  --scrollbar-size: 1.0625rem; /* 统一滚动条尺寸变量，方便后续调整 */
  /* 内容区域：同时实现上下+左右边缘渐变 */
  --mask-content: 
    linear-gradient(to bottom, transparent, black 20%, black 80%, transparent 100%),
    linear-gradient(to right, transparent, black 20%, black 80%, transparent 100%);
  --mask-content-size: calc(100% - var(--scrollbar-size)) calc(100% - var(--scrollbar-size));
  /* 右侧垂直滚动条：实心黑色，避免被渐变遮罩 */
  --mask-scrollbar-y: linear-gradient(black, black);
  --mask-scrollbar-y-size: var(--scrollbar-size) calc(100% - var(--scrollbar-size));
  /* 底部水平滚动条：实心黑色，避免被渐变遮罩 */
  --mask-scrollbar-x: linear-gradient(black, black);
  --mask-scrollbar-x-size: calc(100% - var(--scrollbar-size)) var(--scrollbar-size);
  /* 右下角滚动条交叉区域：实心方块 */
  --mask-scrollbar-corner: linear-gradient(black, black);
  --mask-scrollbar-corner-size: var(--scrollbar-size) var(--scrollbar-size);

  /* WebKit内核浏览器兼容 */
  -webkit-mask-image: var(--mask-content), var(--mask-scrollbar-y), var(--mask-scrollbar-x), var(--mask-scrollbar-corner);
  -webkit-mask-size: var(--mask-content-size), var(--mask-scrollbar-y-size), var(--mask-scrollbar-x-size), var(--mask-scrollbar-corner-size);
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;

  /* 标准语法 */
  mask-image: var(--mask-content), var(--mask-scrollbar-y), var(--mask-scrollbar-x), var(--mask-scrollbar-corner);
  mask-size: var(--mask-content-size), var(--mask-scrollbar-y-size), var(--mask-scrollbar-x-size), var(--mask-scrollbar-corner-size);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
}

p {
  width: 30rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

HTML（无需修改）

<div class="visible masked-overflow">
  <p class="product-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed qu</p>
</div>

关键细节说明 #

1. 滚动条尺寸变量：将滚动条宽度抽为--scrollbar-size，所有依赖滚动条尺寸的计算都使用该变量，后续调整滚动条样式时只需修改这一处。
2. 内容区域渐变：通过两个线性渐变叠加，同时实现上下（垂直方向）和左右（水平方向）的边缘渐变，渐变范围为20%-80%区间保持完全可见，两端逐渐透明。
3. 滚动条区域保留：分别为右侧、底部滚动条以及交叉区域设置实心黑色的mask，确保这些区域不会被渐变遮罩，滚动条始终清晰可见。
4. Mask层叠加顺序：CSS Mask的叠加顺序是从左到右，内容渐变层在最上层，滚动条区域的mask在下层，确保滚动条区域不会被渐变覆盖。

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