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