需求

在开发一个滑动列表时，顶部和底部需要设定一个白色渐变遮罩，这个遮罩底部的列表同样需要滑动等功能，大致结构如下：

<div class="header"></div>
<div class="list_container">
    <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>
<div class="footer"></div>

其中header和footer为遮罩实现，此时如果滑动列表，那么只能在遮罩之间的可视化区域进行滑动，如果要进行滚动，那么onTouch等事件会被遮罩拦截。

解决

在CSS3中可以对遮罩直接使用pointer-events:none属性，该属性将遮罩的鼠标等事件全部忽略，相当于元素透明且不会拦截事件，这样遮罩底部的列表即可正常滑动。

.header {
    pointer-events: none;
}

.footer {
    pointer-events: none;
}