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

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

为了展示表格中单行数据的详细详情,常日的办理方案是采取新页面或者是弹窗来完成。

html5文字滚动代码好法式员web前端进修路线分享滚动穿透办法 SQL
(图片来自网络侵删)

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

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

没有footer部分,设置modal-card的高度为全体屏幕的高度:100vh

表现:

1、在chrome浏览器中显示,全体modal-card占满全体屏幕

2、在手机端显示也是占满,但是问题是,根据手势移动,会将浏览器的搜索框部分往上顶,此时弹窗下面的数据列表页能够进行滑动,之后弹窗的标题覆盖浏览器原搜索框部分,但这之间有延迟,能清晰看到下面页面的数据

3、在其他手-机上会有其余一种显示,如果滑动速率比较快,弹窗涌现后立即滑动,就会看到在弹窗的底部就会涌现一个小的空缺,同样弹窗下面的页面能够滚动,并且有明显延迟和数据滚动显示。

办理方案:

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