問題背景:
網站需要在移動端完成適配,針對移動端H5以及web端採用的都是bluma這種flex佈局解決方案
在H5中使用的列表採用的是 react-virtualized 來繪製表格
為了展示表格中單行資料的具體詳情,通常的解決方案是採用新頁面或者是彈窗來完成。
這裡採用的是彈窗的方案,點選單行資料後的資料詳情用的是 bluma 的 modal-card。
具體細節和例項可以參考: bulma.io/documentati…
問題詳情:
在點選單行資料後,彈窗顯示詳情資料,整個 modal-card 設定成 position:fixed;
沒有 footer 部分,設定 modal-card 的高度為整個螢幕的高度:100vh
表現:
- 在chrome瀏覽器中顯示,整個modal-card佔滿整個螢幕
- 在手機端顯示也是佔滿,但是問題是,根據手勢移動,會將瀏覽器的搜尋框部分往上頂,此時彈窗下面的資料列表頁能夠進行滑動,之後彈窗的標題覆蓋瀏覽器原搜尋框部分,但這之間有延遲,能清晰看到下面頁面的資料
- 在其他手機上會有另外一種顯示,如果滑動速度比較快,彈窗出現後立即滑動,就會看到在彈窗的底部就會出現一個小的空白,同樣彈窗下面的頁面能夠滾動,並且有明顯延遲和資料滾動顯示。
解決方案:
modal-card 自身解決方案:
JS + CSS overflow:hidden
- 通過JS動態給彈窗下面的頁面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');
}
複製程式碼
- 通過 overflow:hidden 來禁止頁面的滾動
is-clipped {
overflow:hidden!important
}
複製程式碼
- 當彈窗關閉時,通過JS刪除掉頁面的 css 類:is-clipped
function closeModals() {
rootEl.classList.remove('is-clipped');
$modals.forEach(function ($el) {
$el.classList.remove('is-active');
});
}
複製程式碼
但是這種方案在應用中測試過後,發現並不能解決問題,上面的問題還是出現
position:fixed 方案
JS + CSS Position:fixed + scrollTop
方案思路:
- 彈窗時,將html的position 設定為 fixed,將彈窗關閉後,將html的postion 屬性取消。
- 因為列表頁會出現滾動的情況,而點選的行有可能是在滾動發生後,所以需要計算html頁面本身的scrollTop 值。
- 因為彈窗時設定position為fixed後,html頁面的 scrollTop 值會變成0,會回到頁面頂部,所以在關閉彈窗後,需要手動設定html頁面的scrollTop 值,讓其滾動到html頁面原來的位置。
- 對於相容性,需要設定不同屬性的 scrollTop 值
彈窗之前:
const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;
複製程式碼
關閉彈窗:
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();
}
複製程式碼