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

效果

遮罩层上滚动,使下方的列表随之滚动_第1张图片

遮罩层为一张边框样式图(如下图):

遮罩层上滚动,使下方的列表随之滚动_第2张图片

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

实现原理

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

上代码

注册事件
/**
 * 增加滚轮滚动事件(暂时只实现了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");

你可能感兴趣的:(js,react)