網站須要在移動端完成適配,針對移動端H5以及web端採用的都是bluma這種flex佈局解決方案css
在H5中使用的列表採用的是 react-virtualized 來繪製表格html
爲了展現表格中單行數據的具體詳情,一般的解決方案是採用新頁面或者是彈窗來完成。react
這裏採用的是彈窗的方案,點擊單行數據後的數據詳情用的是 bluma 的 modal-card。web
具體細節和實例能夠參考: bulma.io/documentati…chrome
在點擊單行數據後,彈窗顯示詳情數據,整個 modal-card 設置成 position:fixed;瀏覽器
沒有 footer 部分,設置 modal-card 的高度爲整個屏幕的高度:100vhbash
表現:佈局
JS + CSS overflow:hiddenpost
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');
}
複製代碼
is-clipped {
overflow:hidden!important
}
複製代碼
function closeModals() {
rootEl.classList.remove('is-clipped');
$modals.forEach(function ($el) {
$el.classList.remove('is-active');
});
}
複製代碼
可是這種方案在應用中測試事後,發現並不能解決問題,上面的問題仍是出現測試
JS + CSS Position:fixed + 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();
}
複製代碼