好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员web前端培训分享滚动穿透方法

[复制链接]
865 0
叶子老师 发表于 2019-9-3 14:49:06 | 只看该作者 |阅读模式 打印 上一主题 下一主题
  好程序员web前端培训分享滚动穿透方法这篇文章主要介绍Html5滚动穿透的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着一起学习学习吧。
  网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案
  H5中使用的列表采用的是react-virtualized 来绘制表格
  为了展示表格中单行数据的具体详情,通常的解决方案是采用新页面或者是弹窗来完成。
  这里采用的是弹窗的方案,点击单行数据后的数据详情用的是blumamodal-card
  在点击单行数据后,弹窗显示详情数据,整个modal-card设置成position:fixed;
  没有footer部分,设置modal-card的高度为整个屏幕的高度:100vh
  表现:
  1chrome浏览器中显示,整个modal-card占满整个屏幕
  2在手机端显示也是占满,但是问题是,根据手势移动,会将浏览器的搜索框部分往上顶,此时弹窗下面的数据列表页能够进行滑动,之后弹窗的标题覆盖浏览器原搜索框部分,但这之间有延迟,能清晰看到下面页面的数据
  3在其他手-机上会有另外一种显示,如果滑动速度比较快,弹窗出现后立即滑动,就会看到在弹窗的底部就会出现一个小的空白,同样弹窗下面的页面能够滚动,并且有明显延迟和数据滚动显示。
  解决方案:
modal-card 自身解决方案:
JS + CSS overflow:hidden
通过JS动态给弹窗下面的页面html添加css类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 来禁止页面的滚动
1
2
3
is-clipped {
    overflow:hidden!important
}
当弹窗关闭时,通过JS删除掉页面的 css 类:is-clipped
1
2
3
4
5
6
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 值
弹窗之前:
1
2
3
const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;
关闭弹窗:
1
2
3
4
5
6
7
8
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();
}
好程序员web前端培训http://www.mygod78.com/html5_class.shtml

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技湖南福彩网 。All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启

淅江福彩网 湖南福彩网 江苏福彩网 西藏福彩网 西藏福彩网 湖南福彩网 上海福彩网 辽宁福彩网 淅江福彩网 辽宁福彩网