對(duì)于前端開發(fā)人員來(lái)說(shuō)簡(jiǎn)單的實(shí)現(xiàn)靜態(tài)頁(yè)面創(chuàng)建是個(gè)比較簡(jiǎn)單的過(guò)程,只有讓頁(yè)面動(dòng)起來(lái)這樣才可以更受人歡迎,那么我們今天就來(lái)分享一個(gè)有關(guān)于:“Html5如何實(shí)現(xiàn)滾動(dòng)穿透?效果實(shí)現(xiàn)案例詳解!”這個(gè)問(wèn)題的相關(guān)內(nèi)容!
問(wèn)題背景:
網(wǎng)站需要在移動(dòng)端完成適配,針對(duì)移動(dòng)端H5以及web端采用的都是bluma這種flex布局解決方案
在H5中使用的列表采用的是 react-virtualized 來(lái)繪制表格
為了展示表格中單行數(shù)據(jù)的具體詳情,通常的解決方案是采用新頁(yè)面或者是彈窗來(lái)完成。
這里采用的是彈窗的方案,點(diǎn)擊單行數(shù)據(jù)后的數(shù)據(jù)詳情用的是 bluma 的 modal-card。
具體細(xì)節(jié)和實(shí)例可以參考:https://bulma.io/documentation/components/modal/
問(wèn)題詳情:
在點(diǎn)擊單行數(shù)據(jù)后,彈窗顯示詳情數(shù)據(jù),整個(gè) modal-card 設(shè)置成 position:fixed;
沒有 footer 部分,設(shè)置 modal-card 的高度為整個(gè)屏幕的高度:100vh
表現(xiàn):
- 在chrome瀏覽器中顯示,整個(gè)modal-card占滿整個(gè)屏幕
- 在手機(jī)端顯示也是占滿,但是問(wèn)題是,根據(jù)手勢(shì)移動(dòng),會(huì)將瀏覽器的搜索框部分往上頂,此時(shí)彈窗下面的數(shù)據(jù)列表頁(yè)能夠進(jìn)行滑動(dòng),之后彈窗的標(biāo)題覆蓋瀏覽器原搜索框部分,但這之間有延遲,能清晰看到下面頁(yè)面的數(shù)據(jù)
- 在其他手機(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
通過(guò)JS動(dòng)態(tài)給彈窗下面的頁(yè)面html添加css類
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add('is-clipped');
$target.classList.add('is-active');
}
通過(guò) overflow:hidden 來(lái)禁止頁(yè)面的滾動(dòng)
is-clipped {
overflow:hidden!important
}
當(dāng)彈窗關(guān)閉時(shí),通過(guò)JS刪除掉頁(yè)面的 css 類:is-clipped
function closeModals() {
rootEl.classList.remove('is-clipped');
$modals.forEach(function ($el) {
$el.classList.remove('is-active');
});
}
但是這種方案在應(yīng)用中測(cè)試過(guò)后,發(fā)現(xiàn)并不能解決問(wèn)題,上面的問(wèn)題還是出現(xiàn)
position:fixed 方案
JS + CSS Position:fixed + scrollTop
方案思路:
- 彈窗時(shí),將 html 的?
position
?設(shè)置為 ?fixed
?,將彈窗關(guān)閉后,將 html 的 postion 屬性取消。 - 因?yàn)榱斜眄?yè)會(huì)出現(xiàn)滾動(dòng)的情況,而點(diǎn)擊的行有可能是在滾動(dòng)發(fā)生后,所以需要計(jì)算html頁(yè)面本身的?
scrollTop
?值。 - 因?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è)面原來(lái)的位置。 - 對(duì)于兼容性,需要設(shè)置不同屬性的 scrollTop 值
彈窗之前:
const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;
關(guān)閉彈窗:
closeModalHandler = () => {
const { closeOrderHistoryModal } = this.props;
global.document.documentElement.style.position = '';
global.pageYOffset = this.scrollTop;
global.document.documentElement.scrollTop = this.scrollTop;
global.document.body.scrollTop = this.scrollTop;
closeOrderHistoryModal();
}
那么今天我們對(duì)于:“Html5如何實(shí)現(xiàn)滾動(dòng)穿透?效果實(shí)現(xiàn)案例詳解!”這方面的相關(guān)內(nèi)容分享就到這邊啦!更多有關(guān)于html5這方面的使用我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。希望小編的分享對(duì)大家的學(xué)習(xí)有所幫助!