2018-7-24 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
效果 遮罩层为一张边框样式图（如下图）： 边框样式遮罩层显示在最上方，然后是中间的列表，最下层是一个透明黑色遮罩层，滚动鼠标滚轮，能控制列表滚动 实现原理 注册最上面遮罩层的滚动事件，拿到滚动滚动方向，然后控制列表滚动的方向和距离 上代码 注册事件 /** * 增加滚轮滚动事件（暂时只实现了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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
遮罩层为一张边框样式图（如下图）：
边框样式遮罩层显示在最上方，然后是中间的列表，最下层是一个透明黑色遮罩层，滚动鼠标滚轮，能控制列表滚动
注册最上面遮罩层的滚动事件，拿到滚动滚动方向，然后控制列表滚动的方向和距离
注册事件 /** * 增加滚轮滚动事件（暂时只实现了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");
蓝蓝设计的小编 http://www.lanlanwork.com
