html 弹出模态窗口控制背景层不能滚动

最新推荐文章于 2022-12-20 18:51:07 发布

原创最新推荐文章于 2022-12-20 18:51:07 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍两种阻止移动端触摸滚动的方法：第一种适用于弹出窗口内无需滚动的情况，通过绑定并解除touchmove事件实现；第二种适用于弹窗内容需要滚动的情况，采用固定定位结合滚动条偏移量保存与恢复的方法。

部署运行你感兴趣的模型镜像

第一种方案
这个方案比较简单，适用弹出窗口内也没有内容需要滚动的时候

1 即在弹出窗口的时候给body绑定 mouchmove事件阻止响应
$("body").on('touchmove',function(event) { event.preventDefault(); }, false);

2 关闭弹出层的时候解绑事件
$("body").unbind('touchmove');

第二种方案
这里相对复杂一些，适用于弹窗里有内容需要滚动的时候

弹窗时
1 弹窗的时候先获取当前滚动条滚动的 offset值
var topN = -($("body").scrollTop());//获取滚动的位置
2 给body层加css属性 position 设置为 fixed固定的
$("body").css('position', 'fixed');
这时候背景层已经不能滚动了，但是背景层的滚动条已经回滚到顶部位置，所以这里需要第三步

3 $("body").css('top', topN);//
设置top值，使页面相当于滚动了，这时候的显示情况恢复到弹窗前的样子

关闭弹窗时
1 获取弹窗时设置的 body 的css属性 top值
var scrollTop = parseInt($("body").css('top').replace('px',''));
2 body的 position属性恢复这时候页面会跳回顶部
$("body").css('position', '');
3 $("body").css('top', 0); top值设为0
4 $("body").scrollTop(-scrollTop);//滚动滚动条，页面不会跳回顶部

ok 搞定

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中