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

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

 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. Test Spring el with ExpressionParser

    Spring expression language (SpEL) supports many functionality, and you can test those expression fea ...

  2. STL学习系列五:Queue容器

    Queue简介 queue是队列容器,是一种“先进先出”的容器. queue是简单地装饰deque容器而成为另外的一种容器. #include <queue> 1.queue对象的默认构造 ...

  3. CentOS服务器配置发送邮件服务

    CentOS服务器配置发送邮件服务 lsb_release -a 查看linux系统版本 在CentOS6以上版本自带mailx版本12.4 rpm -qa | grep mailx 查看系统自带的m ...

  4. socket的shutdown与close

    shutdown原型 int shutdown(int socket, int how); socket 指定socket的文件描述符 how    指定shutdown的类型 SHUT_RD 禁止读 ...

  5. Volley使用指南第二回(来自developer.android)

    上一篇文章翻译了一下google的Volley官方文档,讲到了最基本的发送request.这一次我们来下一回:创建一个自定义RequestQueue. 这篇文章将会教你一步一步创建自己的Request ...

  6. [Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法

    主要讲解Android Studio中生成aar文件以及本地方式使用aar文件的方法. 在Android Studio中对一个自己库进行生成操作时将会同时生成*.jar与*.aar文件. 分别存储位置 ...

  7. hdu 5534 Partial Tree 背包DP

    Partial Tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  8. C#中使用UDP通信

    UDP通信是无连接通信,客户端在发送数据前无需与服务器端建立连接,即使服务器端不在线也可以发送,但是不能保证服务器端可以收到数据. 服务器端代码: static void Main(string[]  ...

  9. c# 自己制作一个简单的项目倒计时器

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. 一个Windows Service项目的完整开发过程

    (一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目  -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...