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.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.lzhte.cn
