有时候页面会遇到这样一个问题,页面有个弹出层 ,弹出层是有滚动条的,当弹出层滚完的时候,后面的页面也会滚动,但是我们希望是后面的页面不滚动;代码如下

第一种方法:(这种方法简单粗暴,直接把浏览器的滚动条也干掉了,会导致弹出层弹出一瞬间抖动一下);

 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端有弹出层 并有滚动的时候遇到的问题以及解决的更多相关文章

  1. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  2. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  3. 移动端 H5 弹出层 fixed 内容可滚动

    <div class="alert_wapper"> <div class="wapper"> <!--内容 --> < ...

  4. 移动端出现弹出层body滚动

    $("#box").on("click",function(e){ e.stopPropagation(); e.preventDefault(); $(&qu ...

  5. layer关闭弹出层,弹出打印

    常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭 解决打印窗口弹不出来的情况 parent.la ...

  6. 移动端和PC端页面常用的弹出层

    我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...

  7. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  9. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

随机推荐

  1. sping配置文件中引入properties文件方式

    <!-- 用于引入 jdbc有配置文件参数 可以使用PropertyPlaceholderConfigurer 或者PropertyOverrideConfigurer --> <b ...

  2. codeforces 629A Far Relative’s Birthday Cake

    A. Far Relative’s Birthday Cake time limit per test 1 second memory limit per test 256 megabytes inp ...

  3. 论DATASNAP中间件对象池

    在此,笔者以DATASNAP为例,其它中间件以此类推. 中间件为什么要使用对象池? 对象池——让所有的对象免堕轮回之苦,对象不再为其生和死而烦恼. 要想让中间件长久稳定地运行,做到无人值守,对象池很重 ...

  4. Codeforces Round #362 (Div. 2) C. Lorenzo Von Matterhorn (类似LCA)

    题目链接:http://codeforces.com/problemset/problem/697/D 给你一个有规则的二叉树,大概有1e18个点. 有两种操作:1操作是将u到v上的路径加上w,2操作 ...

  5. HDU 4432 Sum of divisors (水题,进制转换)

    题意:给定 n,m,把 n 的所有因数转 m 进制,再把各都平方,求和. 析:按它的要求做就好,注意的是,是因数,不可能有重复的...比如4的因数只有一个2,还有就是输出10进制以上的,要用AB.. ...

  6. sqlserver表分区与调优与行列转换

    转自: http://www.cnblogs.com/knowledgesea/p/3696912.html http://www.open-open.com/lib/view/open1418462 ...

  7. Usage of readonly and const

    Many new learners can not make sure the usage scenarios of readonly and const keywords. In my opinio ...

  8. java 方法调用绑定--《java编程思想》学习笔记

    将一个方法调用同一个方法主体关联起来,就是绑定. 绑定分两种 :前期绑定 和 后期绑定 . 绑定------------- | -----前期绑定-------编译期绑定 { static , fin ...

  9. python写的百度贴吧相册下载

    突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...

  10. Codeforces Gym 100431G Persistent Queue 可持久化队列

    Problem G. Persistent QueueTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...