在知乎<sup>[1]</sup>看到一题比较有意思的题目。
题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。
本文将简单介绍几种这个效果的实现方案。
渐变配合 pointer-event
第一种方式，比较容易想到。使用渐变配合 pointer-event 实现。
简单模拟一下场景，假设我们有如下一个 ul 列表，超出可以滚动：
<ul>
<li>Button</li>
<li>Button</li>
<li>Button</li>
<li>Button</li>
<li>Button</li>
<li>Button</li>
</ul>
ul {
width: 300px;
display: flex;
flex-wrap: nowrap;
border: 1px solid #999;
padding: 5px;
overflow-x: scroll;
}
像是这样：
首先，我们需要实现右侧的渐变消失的遮罩效果，这个最常见的，就是通过叠加一个从透明到白色的渐变层实现。
这个简单，我们借助元素的伪元素，绝对定位到右侧即可：
.g-container {
...
&::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
top: 0;
width: 100px;
background: linear-gradient(90deg, transparent, #fff);
}
}
效果如下：
这样遮罩就解决了，唯一的问题在于，叠加的这一层，确实遮挡住了其下方的按钮点击：
这个其实也好解决，只需要给叠加的这一层，添加一个 pointer-event: none 即可。
pointer-event：CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target<sup>[2]</sup>。当值为 none 时，元素永远不会成为鼠标事件的 target，也就是我们常说的，实现了鼠标点击穿透。
代码如下：
.g-container {
...
&::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
top: 0;
width: 100px;
background: linear-gradient(90deg, transparent, #fff);
pointer-event: none;
}
}
如此一来，就能完美实现此效果，有遮罩，且遮罩不会遮挡住下方内容：
完整的代码你可以戳这里：CodePen Demo -- Linear Gradient Mask & Pointer-event<sup>[3]</sup>
