为可滚动div添加底部白色线性渐变并兼容IE9+

我来帮你搞定这个兼容问题——你想要给可滚动div底部加一个始终固定的白色线性渐变遮罩，目前用position: fixed的方案在IE9及以上版本失效，接下来我给你一套全浏览器兼容的实现方案，完全能达到你要的效果。

问题根源分析 #

你之前用position: fixed的核心问题在于：fixed定位是相对于浏览器视口的，而不是你的可滚动div容器。当div内部内容滚动时，渐变遮罩会跟着视口走，而不是固定在div底部，这在IE9里表现得尤为明显，甚至直接失效。

兼容IE9+的解决方案 #

我们需要换用position: absolute配合容器的相对定位，让渐变遮罩牢牢固定在div底部，同时兼顾IE9的渐变语法。

完整CSS代码

/* 给可滚动容器设置相对定位，作为内部绝对定位元素的参照 */
.perfect-scrollbar {
  position: relative;
  overflow-y: auto; /* 确保容器内容超出时可滚动 */
  /* 这里保留你原有容器的样式，比如高度、宽度等 */
}

/* 用伪元素创建渐变遮罩，固定在容器底部 */
.perfect-scrollbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px; /* 渐变遮罩的高度，可根据需求调整 */
  /* 标准浏览器渐变：从底部白色半透明过渡到顶部完全透明 */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  /* IE9专属渐变兼容：前两位是透明度（CC=80%），后六位是白色RGB值 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCFFFFFF', endColorstr='#00FFFFFF', GradientType=0);
  /* 确保遮罩不阻挡内部内容的交互 */
  pointer-events: none;
}

代码细节解释

• position: relative：给可滚动容器加上这个属性，让内部的伪元素绝对定位时以容器为参照，而不是视口，这是让渐变固定在div底部的关键。
• position: absolute + left/right/bottom: 0：让渐变遮罩铺满容器宽度，并且死死固定在底部，不管容器怎么滚动都不会移位。
• height: 60px：控制渐变遮罩的高度，对应你之前需求里“60%透明区域”的视觉效果，可根据实际需要调整数值。
• pointer-events: none：这个属性很重要，它能让渐变遮罩“穿透”，不会阻挡用户点击或交互容器内部的内容。
• IE9的filter语法：IE9不支持标准的linear-gradient，所以用DXImageTransform.Microsoft.gradient来实现。其中startColorstr='#CCFFFFFF'对应rgba(255,255,255,0.8)（CC是十六进制的204，204/255≈0.8），endColorstr='#00FFFFFF'对应完全透明的白色，GradientType=0表示从上到下的渐变方向，和标准写法的to top效果一致。

额外注意事项 #

• 如果你之前用的是::before伪元素，建议换成::after，这样能确保渐变遮罩在容器内容的上方，不会被内容覆盖；如果一定要用::before，记得给它设置更高的z-index值。
• 确保容器的overflow-y设置为auto或scroll，否则内容无法滚动，渐变遮罩的固定效果也体现不出来。
• 测试IE9时，注意filter的颜色值是8位十六进制，前两位代表透明度（00=完全透明，FF=完全不透明），后六位是RGB颜色值。

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