web前端學(xué)習(xí)路線分享滾動(dòng)穿透方法，這篇文章主要介紹Html5滾動(dòng)穿透的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著一起學(xué)習(xí)學(xué)習(xí)吧。

　　網(wǎng)站需要在移動(dòng)端完成適配,針對(duì)移動(dòng)端H5以及web端采用的都是bluma這種flex布局解決方案

　　在H5中使用的列表采用的是react-virtualized 來繪制表格

　　為了展示表格中單行數(shù)據(jù)的具體詳情，通常的解決方案是采用新頁(yè)面或者是彈窗來完成。

　　這里采用的是彈窗的方案，點(diǎn)擊單行數(shù)據(jù)后的數(shù)據(jù)詳情用的是bluma的modal-card。

　　在點(diǎn)擊單行數(shù)據(jù)后，彈窗顯示詳情數(shù)據(jù)，整個(gè)modal-card設(shè)置成position:fixed;

　　沒有footer部分，設(shè)置modal-card的高度為整個(gè)屏幕的高度：100vh

　　表現(xiàn)：

　　1、在chrome瀏覽器中顯示，整個(gè)modal-card占滿整個(gè)屏幕

　　2、在手機(jī)端顯示也是占滿，但是問題是，根據(jù)手勢(shì)移動(dòng)，會(huì)將瀏覽器的搜索框部分往上頂，此時(shí)彈窗下面的數(shù)據(jù)列表頁(yè)能夠進(jìn)行滑動(dòng)，之后彈窗的標(biāo)題覆蓋瀏覽器原搜索框部分，但這之間有延遲，能清晰看到下面頁(yè)面的數(shù)據(jù)

　　3、在其他手-機(jī)上會(huì)有另外一種顯示，如果滑動(dòng)速度比較快，彈窗出現(xiàn)后立即滑動(dòng)，就會(huì)看到在彈窗的底部就會(huì)出現(xiàn)一個(gè)小的空白，同樣彈窗下面的頁(yè)面能夠滾動(dòng)，并且有明顯延遲和數(shù)據(jù)滾動(dòng)顯示。

　　解決方案：

 modal-card 自身解決方案：

JS + CSS overflow:hidden

通過JS動(dòng)態(tài)給彈窗下面的頁(yè)面html添加css類

通過 overflow:hidden 來禁止頁(yè)面的滾動(dòng)

當(dāng)彈窗關(guān)閉時(shí)，通過JS刪除掉頁(yè)面的 css 類：is-clipped

但是這種方案在應(yīng)用中測(cè)試過后，發(fā)現(xiàn)并不能解決問題，上面的問題還是出現(xiàn)

position:fixed 方案

JS + CSS Position:fixed + scrollTop

方案思路：

1. 彈窗時(shí)，將html的position 設(shè)置為 fixed，將彈窗關(guān)閉后，將html的postion 屬性取消。

2. 因?yàn)榱斜眄?yè)會(huì)出現(xiàn)滾動(dòng)的情況，而點(diǎn)擊的行有可能是在滾動(dòng)發(fā)生后，所以需要計(jì)算html頁(yè)面本身的scrollTop 值。

3. 因?yàn)閺棿皶r(shí)設(shè)置position為fixed后，html頁(yè)面的 scrollTop 值會(huì)變成0，會(huì)回到頁(yè)面頂部，所以在關(guān)閉彈窗后，需要手動(dòng)設(shè)置html頁(yè)面的scrollTop 值，讓其滾動(dòng)到html頁(yè)面原來的位置。

4. 對(duì)于兼容性，需要設(shè)置不同屬性的 scrollTop 值

彈窗之前：

關(guān)閉彈窗：