移动端的弹窗滚动禁止body滚动
2024-10-12 20:12:04
前言
最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个都滑动不了
所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果
$("body").css({
overflow:"hidden",
height:"100%"
});
但是这样又出来一个问题,会在弹窗出来的时候body直接回到顶部,显然不是我愿意要的,所以这时候就需要让body显示在之前的高度,所以我们可以获取点击时body被卷去的高度bodyScroll=$("body").scrollTop();并且给body定位,就可以实现我们所需要的了
var bodyScroll=$("body").scrollTop();
$("body").css({
overflow:"hidden",
position:'fixed',
top:-bodyScroll
});
关闭弹窗的时候在恢复之前的就可以了,并且滚动到原先的位置
$("body").css({
'overflow':'auto',
'position': 'static',
'top': 'auto'
});
$("body").scrollTop(bodyScroll);
在安卓和苹果经过测试没有出什么bug,希望也可以解决你们的问题。
最新文章
- 关于for循环删除数组内容出现的问题
- sublime text 如何设置”在浏览器浏览“的快捷键
- Codeforces Round #356 (Div. 2)
- 修改placeholder提示内容的颜色以及文本框输入文字内容的颜色
- php基本语法
- Shell 字符串比较
- Eclipse执行Hadoop WordCount
- Windows Server 2008 R2 开启Win7主题效果Aero
- centos vim的安装目录在哪里
- Javah生成JNI头文件
- 如何在SourceInsight中选中匹配的大括号中的内容
- angular替代Jquery,常用方法支持
- HTML5 移动开发入门知识点
- TypeScript 的声明文件的使用与编写
- 菜鸟如何反转到资深Web安全工程师
- python 指定日期图片文件删除
- JAVA覆写Request过滤XSS跨站脚本攻击
- ios Block详解
- 2018/7/26号碰到了个奇怪的问题(http有问题,但是ftp没毛病)
- 6、Python变量
热门文章
- Codeforces 834D The Bakery【dp+线段树维护+lazy】
- [bzoj1301] [LLH邀请赛]参观路线
- Bellman-Ford 求含负权最短路
- hdu_2444The Accomodation of Students(二分图的判定和计算)
- Travelling(spfa+状态压缩dp)
- Redis介绍及Jedis测试
- LuceneNet 实现快速大文件大数据查询
- day2 作业
- 快速搭建appium自动测试环境
- Map,List,POJO深拷贝(序列化实现)方法与注意事项