html5拖动效果怎么写(Html5 滚动穿透的方法)
类别:Web前端 浏览量:2511
时间:2021-10-05 00:11:53 html5拖动效果怎么写
Html5 滚动穿透的方法问题背景:
网站需要在移动端完成适配,针对移动端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占满整个屏幕
- 在手机端显示也是占满,但是问题是,根据手势移动,会将浏览器的搜索框部分往上顶,此时弹窗下面的数据列表页能够进行滑动,之后弹窗的标题覆盖浏览器原搜索框部分,但这之间有延迟,能清晰看到下面页面的数据
- 在其他手机上会有另外一种显示,如果滑动速度比较快,弹窗出现后立即滑动,就会看到在弹窗的底部就会出现一个小的空白,同样弹窗下面的页面能够滚动,并且有明显延迟和数据滚动显示。
解决方案:
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
方案思路:
- 弹窗时,将html的position 设置为 fixed,将弹窗关闭后,将html的postion 属性取消。
- 因为列表页会出现滚动的情况,而点击的行有可能是在滚动发生后,所以需要计算html页面本身的scrollTop 值。
- 因为弹窗时设置position为fixed后,html页面的 scrollTop 值会变成0,会回到页面顶部,所以在关闭弹窗后,需要手动设置html页面的scrollTop 值,让其滚动到html页面原来的位置。
- 对于兼容性,需要设置不同属性的 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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- 如何获取html5表单中的元素的值(html5 datalist 选中option选项后的触发事件)
- html5功能讲解(Html5定位终极解决方案)
- html5怎么滚动屏幕(HTML5 video进入全屏和退出全屏的实现方法)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5带放大镜的搜索代码(html5借用repeating-linear-gradient实现一把刻度尺ruler)
- html5的新特性
- html5长按动画效果(HTML5实现移动端弹幕动画效果)
- html5中table属性(Html5之自定义属性data-,dataset)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- html5新增特性(总结html5自定义属性有哪些)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
热门推荐
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- SQL中哪些情况会引起全表扫描
- 使用python编辑个人名片(python实现名片管理系统项目)
- html支付功能怎么实现(Div+CSS仿支付宝登录页面)
- 阿里云服务器怎么设置防御网站(阿里云服务器的一些常用安全优化方法整理)
- nodejs子进程调试(Node.js实现断点续传)
- 宝塔面板错误代码3(宝塔面板打开网站No input file specified如何解决?)
- 织梦各个模板对应的页面(织梦DEDECMS实现留言板调用模板头部及底部的方法)
- VPS服务器常用性能测试脚本汇总(VPS服务器常用性能测试脚本汇总)
- js分号的使用
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9