Html5 滚动穿透的方法

网页制作 2024/12/22 佚名

3 2 1

问题背景：

网站需要在移动端完成适配,针对移动端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,滚动穿透

标签：

Html5,滚动穿透

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

千金楼资源网 Copyright www.htabc.com

评论“Html5 滚动穿透的方法”

Html5 滚动穿透的方法

暂无“Html5 滚动穿透的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

Html5 滚动穿透的方法

Html5,滚动穿透

HTML5新增form控件和表单属性实例代码详解

JavaScript+Canvas实现自定义画板的示例代码

评论“Html5 滚动穿透的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接