pc端有弹出层 并有滚动的时候遇到的问题以及解决
有时候页面会遇到这样一个问题,页面有个弹出层 ,弹出层是有滚动条的,当弹出层滚完的时候,后面的页面也会滚动,但是我们希望是后面的页面不滚动;代码如下
第一种方法:(这种方法简单粗暴,直接把浏览器的滚动条也干掉了,会导致弹出层弹出一瞬间抖动一下);
1:弹出层出现的时候设置,
$('body').css('overflow','hidden');
2:弹出层隐藏的时候
$('body').css('overflow','auto');
第二种方法:(一小段脚本 其中.toast是弹出层 ,这种方式,窗口纹丝不动,适合强迫症患者);
var scrollTop = -1;
$('.toast').mouseenter(function () {
scrollTop = $(window).scrollTop();
}).mouseleave(function () {
scrollTop = -1;
})//鼠标进入到区域后,则存储当前window滚动条的高度 $(window).scroll(function () {
scrollTop !== -1 && $(this).scrollTop(scrollTop);
});// 鼠标进入到区域后,则强制window滚动条的高度
pc端有弹出层 并有滚动的时候遇到的问题以及解决的更多相关文章
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- 移动端 H5 弹出层 fixed 内容可滚动
<div class="alert_wapper"> <div class="wapper"> <!--内容 --> < ...
- 移动端出现弹出层body滚动
$("#box").on("click",function(e){ e.stopPropagation(); e.preventDefault(); $(&qu ...
- layer关闭弹出层,弹出打印
常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭 解决打印窗口弹不出来的情况 parent.la ...
- 移动端和PC端页面常用的弹出层
我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
随机推荐
- hibernate注解@JoinTable说明
表关联(@JoinTable)注解说明:@Target({METHOD, FIELD})public @interface JoinTable{ String name() default &q ...
- poj 1543 Perfect Cubes(注意剪枝)
Perfect Cubes Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14901 Accepted: 7804 De ...
- HDU 4597 Play Game (DP,记忆化搜索,博弈)
题意:Alice和Bob玩一个游戏,有两个长度为N的正整数数字序列,每次他们两个,只能从其中一个序列,选择两端中的一个拿走.他们都希望可以拿到尽量大的数字之和, 并且他们都足够聪明,每次都选择最优策略 ...
- 在ASP.NET MVC中的四大筛选器(Filter)及验证实现
http://www.cnblogs.com/artech/archive/2012/08/06/action-filter.html http://www.cnblogs.com/ghhlyy/ar ...
- Enterprise Library 4 数据访问应用程序块
Enterprise Library 数据访问应用程序块简化了实现常规数据访问功能的开发任务.应用程序可以在各种场景中使用此应用程序块,例如为显示而读取数据.传递数据穿过应用程序层( applicat ...
- JS Math 类库介绍
下面介绍下随机生成数的常用几个API JS 随机数生成 : 在JavaScript , 提供了生成随机数的API, Math.random() 1.Math.random() : 随机生成小数 . 生 ...
- Android布局优化之include、merge、ViewStub的使用
本文针对include.merge.ViewStub三个标签如何在布局复用.有效减少布局层级以及如何可以按需加载三个方面进行介绍的. 复用布局可以帮助我们创建一些可以重复使用的复杂布局.这种方式也意味 ...
- iOS UIButton EdgeInsets
说一下系统的button,image 和 title的位置关系 默认image 和 title的位置关系: 随便画了草图,有点丑,不过不妨碍理解: 第一种:在button上只设置文字,这个时候,but ...
- 配置文件struts2Struts2配置文件模块化包含(include)与action总结
本文是一篇关于配置文件struts2的帖子 <include>标签 当Struts配置文件比较多,需要模块化分别或分开成为多个配置文件时,这个功能比较好. 则需要使用<include ...
- MaterialDesignLibrary
https://github.com/navasmdc/MaterialDesignLibrary MaterialDesignLibrary.zip