怎么在Html5中實(shí)現(xiàn)滾動(dòng)穿透-創(chuàng)新互聯(lián)
本篇文章為大家展示了怎么在Html5中實(shí)現(xiàn)滾動(dòng)穿透，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
問(wèn)題詳情：
在點(diǎn)擊單行數(shù)據(jù)后，彈窗顯示詳情數(shù)據(jù)，整個(gè) modal-card 設(shè)置成 position:fixed;
沒(méi)有 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();
}
上述內(nèi)容就是怎么在Html5中實(shí)現(xiàn)滾動(dòng)穿透，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前文章：怎么在Html5中實(shí)現(xiàn)滾動(dòng)穿透-創(chuàng)新互聯(lián)
新聞來(lái)源：http://m.jiaotiyi.com/article/dogedh.html