如何使横向菜单的mask-image不覆盖滚动条，完整显示滚动条？

问题描述 #

给横向菜单的边缘设置mask-image实现左右渐隐效果，但滚动条被包含在mask范围内，导致边缘出现褪色。尝试使用以下代码调整后，滚动条被完全隐藏：

mask-size: 100% 85%;
mask-position: top;
mask-repeat: no-repeat;

现有代码示例：

.nav {
  width: 400px;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 97%, rgba(255, 255, 255, 0) 100%);
  padding-bottom: 20px;
}

.menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

<nav class="nav">
  <div class="menu">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>
</nav>

解决方案 #

使用多层mask组合，分别控制内容区域的渐隐效果和滚动条区域的完全显示：

.nav {
  width: 400px;
  overflow-x: auto;
  /* 两层mask：上层控制内容渐隐，下层控制滚动条完整显示 */
  -webkit-mask-image: 
    linear-gradient(to right, transparent 0%, white 3%, white 97%, transparent 100%),
    linear-gradient(white, white);
  /* 设置两层mask的尺寸：上层占85%高度，下层占15% */
  -webkit-mask-size: 100% 85%, 100% 15%;
  /* 定位：上层在顶部，下层在底部 */
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
  /* 合并两层mask，显示所有区域 */
  -webkit-mask-composite: source-over;
  /* 标准属性写法，适配支持标准mask的浏览器 */
  mask-composite: add;
  padding-bottom: 20px;
}

.menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

原理说明 #

1. 第一层mask保留原有的左右渐隐效果，仅覆盖菜单内容区域（顶部85%高度）；
2. 第二层mask是完全不透明的白色渐变，覆盖滚动条所在的底部区域（15%高度）；
3. 通过mask-composite将两层mask的显示区域合并，确保滚动条区域不受渐隐效果影响，完整显示。

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