H5 滚动穿透

问题背景：

网站须要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案

在H5中使用的列表采用的是 react-virtualized 来绘制表格

为了展现表格中单行数据的具体详情，一般的解决方案是采用新页面或者是弹窗来完成。

这里采用的是弹窗的方案，点击单行数据后的数据详情用的是 bluma 的 modal-card。

具体细节和实例能够参考： bulma.io/documentati…

问题详情：

在点击单行数据后，弹窗显示详情数据，整个 modal-card 设置成 position:fixed;

没有 footer 部分，设置 modal-card 的高度为整个屏幕的高度：100vh

表现：

1. 在chrome浏览器中显示，整个modal-card占满整个屏幕
2. 在手机端显示也是占满，可是问题是，根据手势移动，会将浏览器的搜索框部分往上顶，此时弹窗下面的数据列表页可以进行滑动，以后弹窗的标题覆盖浏览器原搜索框部分，但这之间有延迟，能清晰看到下面页面的数据
3. 在其余手机上会有另一种显示，若是滑动速度比较快，弹窗出现后当即滑动，就会看到在弹窗的底部就会出现一个小的空白，一样弹窗下面的页面可以滚动，而且有明显延迟和数据滚动显示。

解决方案：

modal-card 自身解决方案：

JS + CSS overflow:hidden

1. 经过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');
}
复制代码

2. 经过 overflow:hidden 来禁止页面的滚动

is-clipped {
    overflow:hidden!important
}
复制代码

3. 当弹窗关闭时，经过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

方案思路：

1. 弹窗时，将html的position 设置为 fixed，将弹窗关闭后，将html的postion 属性取消。
2. 由于列表页会出现滚动的状况，而点击的行有多是在滚动发生后，因此须要计算html页面自己的scrollTop 值。
3. 由于弹窗时设置position为fixed后，html页面的 scrollTop 值会变成0，会回到页面顶部，因此在关闭弹窗后，须要手动设置html页面的scrollTop 值，让其滚动到html页面原来的位置。
4. 对于兼容性，须要设置不一样属性的 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();
}
复制代码