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

2018-7-24 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

效果

这里写图片描述

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

这里写图片描述

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

实现原理

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

上代码

注册事件 /**
 * 增加滚轮滚动事件(暂时只实现了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");
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 遮罩层上滚动 使下方的列表随之滚动


Powered by emlog 京ICP备12006971号-1 sitemap