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

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

 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. HDU 5768 Lucky7 (中国剩余定理 + 容斥 + 快速乘法)

    Lucky7 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5768 Description When ?? was born, seven crow ...

  2. POJ 1064 Cable master (二分答案)

    题目链接:http://poj.org/problem?id=1064 有n条绳子,长度分别是Li.问你要是从中切出m条长度相同的绳子,问你这m条绳子每条最长是多少. 二分答案,尤其注意精度问题.我觉 ...

  3. Unity3D之Mecanim动画系统学习笔记(三):Animation View

    动画组件之间的关系 我们先看一张图: 这里我们可以看到,我们在GameObject之上绑定的Animator组件是控制模型进行动画播放的. 而其属性Controller则对应一个Animator Co ...

  4. SQL Select count(*)和Count(1)的区别和执行方式及SQL性能优化

    SQL性能优化:http://www.cnblogs.com/CareySon/category/360333.html Select count(*)和Count(1)的区别和执行方式 在SQL S ...

  5. Java中重写与重载的辨析

    摘要:在我们学习Java过程中,重写与重载使我们在面向对象里要学习的重要知识点之一,那我们看看它们有那些区别: 一.重写 1.概念:简单的说就是子类将从父类继承而来的方法重新实现一次. 2.特点: ① ...

  6. java线程中的wait和notify以及notifyall

    一.区别与联系 1.1.wait(),notify()和notifyAll()都是java.lang.Object的方法,而确实sleep方法是Thread类中的方法,这是为什么呢?  因为wait和 ...

  7. Date、String、Calendar、Timestamp类型之间的转化

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  8. python的一些总结3

    好吧 刚刚的2篇文章都很水.. 这篇 也是继续水 在 templates 右键新建 html 文件:如 index.html (输入以下代码) <!DOCTYPE html> <ht ...

  9. Note of IOS 7 - Views

    1. Views presentation: A view (an object whose class is UIView or a subclass of UIView) knows how to ...

  10. Educational Codeforces Round 1 E. Chocolate Bar 记忆化搜索

    E. Chocolate Bar Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/598/prob ...