Html5 翻转穿透的方式

日期:2020-10-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

难题情况:

网站必须在挪动端进行兼容,对于挪动端H5和web端选用的全是bluma这类flex合理布局处理计划方案

在H5中应用的目录选用的是 react-virtualized 来绘图报表

以便展现报表中单行数据信息的实际详细信息,一般的处理计划方案是选用新网页页面或是弹窗来进行。

这里选用的是弹窗的计划方案,点一下单行数据信息后的数据信息详细信息用的是 bluma 的 modal-card。

实际细节和案例能够参照:https://bulma.io/documentation/components/modal/

难题详细信息:

在点一下单行数据信息后,弹窗显示信息详细信息数据信息,全部 modal-card 设定成 position:fixed;

沒有 footer 一部分,设定 modal-card 的高宽比为全部显示屏的高宽比:100vh

主要表现:

  • 在chrome访问器中显示信息,全部modal-card占满全部显示屏
  • 在手机上端显示信息也是占满,可是难题是,依据手式挪动,会将访问器的检索框一部分往上顶,此时弹窗下面的数据信息目录页可以开展拖动,以后弹窗的题目遮盖访问器原检索框一部分,但这之间有延迟时间,能清楚看到下面网页页面的数据信息
  • 在别的手机上上会有此外1种显示信息,假如拖动速率较为快,弹窗出現后马上拖动,就会看到在弹窗的底部就会出現1个小的空白,一样弹窗下面的网页页面可以翻转,而且有显著延迟时间和数据信息翻转显示信息。

处理计划方案:

 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

计划方案思路:

  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();
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。