Html5 滚动穿透的方法


Posted in HTML / CSS onMay 13, 2019

问题背景:

网站需要在移动端完成适配,针对移动端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');
}

Html5 滚动穿透的方法 

通过 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');
    });
}

Html5 滚动穿透的方法

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

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;

Html5 滚动穿透的方法

关闭弹窗:

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 滚动穿透的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
You might like
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
express启用https使用小记
2019/05/21 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python实现列表的排序方法分享
2019/07/01 Python
python中 * 的用法详解
2019/07/10 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
假期安全教育广播稿
2014/10/04 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
golang实现浏览器导出excel文件功能
2022/03/25 Golang