遮罩层上滚动，使下方的列表随之滚动

效果

遮罩层为一张边框样式图（如下图）：

边框样式遮罩层显示在最上方，然后是中间的列表，最下层是一个透明黑色遮罩层，滚动鼠标滚轮，能控制列表滚动

实现原理

注册最上面遮罩层的滚动事件，拿到滚动滚动方向，然后控制列表滚动的方向和距离

上代码

注册事件
/**
 * 增加滚轮滚动事件（暂时只实现了chrome的滚动效果）
 * @param modalDomId 遮罩层domId
 * @param domId 需要滚动下层列表domId
 */
addMousewheelListener(modalDomId:string,domId:string){
  //添加页面监听
  let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId);
    //向上滚
    if (e.wheelDelta > 0){
      if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      }
      else{
        scrollContentDom.scrollTop = 0 ;
      }
    }
    //向下滚
    else{
      if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

组件调用：
this.addMousewheelListener("你的最上方遮罩层id","你想要滚动的列表id");