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进度条分享
Apr 11 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
php adodb介绍
2009/03/19 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python列表的常用操作方法小结
2016/05/21 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
类的核心特性有哪些
2014/01/01 面试题
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
2014新年寄语
2014/01/20 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
出国留学单位推荐信
2015/03/26 职场文书
律师函格式范本
2015/05/27 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
python turtle绘图命令及案例
2021/11/23 Python