老色批在线播放视频网站免费-老色批影院-老色鬼福利 A级黄色片视在线播放_日韩欧美永久中文字幕视频_2

遮罩層上滾動(dòng)，使下方的列表隨之滾動(dòng)

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

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

效果

這里寫圖片描述

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

這里寫圖片描述

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

實(shí)現(xiàn)原理

注冊(cè)最上面遮罩層的滾動(dòng)事件，拿到滾動(dòng)滾動(dòng)方向，然后控制列表滾動(dòng)的方向和距離

上代碼 

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

日歷

鏈接

個(gè)人資料

存檔

新河县| 勐海县| 鲁甸县| 龙江县| 贡觉县| 拜泉县| 承德市| 双牌县| 土默特右旗| 青州市| 高唐县| 上高县| 长子县| 铁岭县| 东乡族自治县| 东港市| 石泉县| 丰县| 尉氏县| 米脂县| 北票市| 资兴市| 措美县| 兴义市| 兴义市| 杂多县| 莆田市| 进贤县| 阳朔县| 罗平县| 汉源县| 阳朔县| 陆河县| 安乡县| 洛阳市| 泊头市| 资源县| 张家港市| 滁州市| 化德县| 衡南县|