亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

遮罩層上滾動，使下方的列表隨之滾動

2018-7-24 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

效果

遮罩層為一張邊框樣式圖（如下圖）：

邊框樣式遮罩層顯示在最上方，然后是中間的列表，最下層是一個透明黑色遮罩層，滾動鼠標(biāo)滾輪，能控制列表滾動

實現(xiàn)原理

注冊最上面遮罩層的滾動事件，拿到滾動滾動方向，然后控制列表滾動的方向和距離

上代碼

注冊事件 /** * 增加滾輪滾動事件（暫時只實現(xiàn)了chrome的滾動效果） * @param modalDomId 遮罩層domId * @param domId 需要滾動下層列表domId */ addMousewheelListener(modalDomId:string,domId:string){ //添加頁面監(jiān)聽 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");
藍(lán)藍(lán)設(shè)計( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

« 設(shè)計大師眼中的設(shè)計連BAT設(shè)計師都在用的視覺動線技巧 »

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.chinatradebeam.com

存檔

亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

遮罩層上滾動，使下方的列表隨之滾動

效果

實現(xiàn)原理

上代碼

分類

日歷

鏈接

個人資料

存檔