问题背景：
网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案
在H5中使用的列表采用的是 react-virtualized 来绘制表格
为了展示表格中单行数据的具体详情，通常的解决方案是采用新页面或者是弹窗来完成。
这里采用的是弹窗的方案，点击单行数据后的数据详情用的是 bluma 的 modal-card。
具体细节和实例可以参考：https://bulma.io/documentation/components/modal/
问题详情：
在点击单行数据后，弹窗显示详情数据，整个 modal-card 设置成 position:fixed;
没有 footer 部分，设置 modal-card 的高度为整个屏幕的高度：100vh
表现：
解决方案：
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
方案思路：
弹窗之前：
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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
