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

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

 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. Gradle – Spring 4 MVC Hello World Example

    In this tutorial, we will show you a Gradle + Spring 4 MVC, Hello World Example (JSP view), XML conf ...

  2. 通过lldb远程调试iOS App

    苹果从Xcode5开始弃用了gcc及gdb, 只能使用llvm用lldb. 在越狱机上虽然仍然可以使用gdb进行调试,但lldb是趋势.下面就介绍一种通过Wifi或者USB,在Mac上使用lldb对i ...

  3. LFI漏洞利用总结(转载)

    主要涉及到的函数include(),require().include_once(),require_once()magic_quotes_gpc().allow_url_fopen().allow_ ...

  4. iOS开发——动画篇Swift篇&动画效果的实现

    Swift - 动画效果的实现   在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...

  5. android141 360 安装软件管理

                      主界面: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  6. MySQL · 物理备份 · Percona XtraBackup 备份原理

    http://mysql.taobao.org/monthly/2016/03/07/ 前言 Percona XtraBackup(简称PXB)是 Percona 公司开发的一个用于 MySQL 数据 ...

  7. redo log write和flush

    http://bbs.chinaunix.net/thread-1753130-1-1.html 在事务提交时innobase会调用ha_innodb.cc 中的innobase_commit,而in ...

  8. 详解SQL Server连接(内连接、外连接、交叉连接)

    在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...

  9. 项目源码--Android应用商店源码

      下载源码   技术要点: 1.互联网应用 客户端框架 2.综合应用开发所 有技术 3.安装应用的管理 4. HTTP网络通信技 术 5.下载安装.评论 框架 6.使用.版本升级 等统计方案 7.源 ...

  10. linux 安装xamp

    前一久用上了ubuntu,想折腾下小窝,懒得自己去装Php啊,apache 之类的东西,刚才用上xampp,直接点,等以后要涉及深再弄,暂时先用着xampp.还不错,很好用,这里简单说下安装,(我是新 ...