问题背景:
网站需要在移动端完成适配,针对移动端h5以及web端采用的都是bluma这种flex布局解决方案
在h5中使用的列表采用的是 react-virtualized 来绘制表格
为了展示表格中单行数据的具体详情,通常的解决方案是采用新页面或者是弹窗来完成。
这里采用的是弹窗的方案,点击单行数据后的数据详情用的是 bluma 的 modal-card。
具体细节和实例可以参考:
问题详情:
在点击单行数据后,弹窗显示详情数据,整个 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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
网友评论