如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
效果
遮罩層為一張邊框樣式圖（如下圖）：
邊框樣式遮罩層顯示在最上方，然后是中間的列表，最下層是一個透明黑色遮罩層，滾動鼠標滾輪，能控制列表滾動
實現(xiàn)原理
注冊最上面遮罩層的滾動事件，拿到滾動滾動方向，然后控制列表滾動的方向和距離
上代碼
注冊事件 /**
* 增加滾輪滾動事件（暫時只實現(xiàn)了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;
}
}
});
}
組件調(diào)用： this.addMousewheelListener("你的最上方遮罩層id","你想要滾動的列表id");
藍藍設(shè)計( m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
