H5 滚动穿透

栏目: CSS · 发布时间: 5年前

内容简介:网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案在H5中使用的列表采用的是 react-virtualized 来绘制表格为了展示表格中单行数据的具体详情,通常的解决方案是采用新页面或者是弹窗来完成。

网站需要在移动端完成适配,针对移动端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');
}
复制代码
H5 滚动穿透
  1. 通过 overflow:hidden 来禁止页面的滚动
is-clipped {
    overflow:hidden!important
}
复制代码
  1. 当弹窗关闭时,通过JS删除掉页面的 css 类:is-clipped
function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
        $el.classList.remove('is-active');
    });
}
复制代码
H5 滚动穿透

但是这种方案在应用中测试过后,发现并不能解决问题,上面的问题还是出现

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;
复制代码
H5 滚动穿透

关闭弹窗:

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();
}
复制代码
H5 滚动穿透

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

MacTalk 人生元编程

MacTalk 人生元编程

池建强 / 人民邮电出版社 / 2014-2-1 / 45

《MacTalk·人生元编程》是一本随笔文集,主要内容来自作者的微信公众平台“MacTalk By 池建强”。本书撰写于2013年,书中时间线却不止于此。作者以一个70 后程序员的笔触,立于Mac 之上,讲述技术与人文的故事,有历史,有明天,有技术,有人生。70 多篇文章划分为六大主题:Mac、程序员与编程、科技与人文、人物、工具、职场。篇篇独立成文,可拆可合,随时阅读。 此外,作者还对原来......一起来看看 《MacTalk 人生元编程》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具