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的问 ...
随机推荐
- Test Spring el with ExpressionParser
Spring expression language (SpEL) supports many functionality, and you can test those expression fea ...
- STL学习系列五:Queue容器
Queue简介 queue是队列容器,是一种“先进先出”的容器. queue是简单地装饰deque容器而成为另外的一种容器. #include <queue> 1.queue对象的默认构造 ...
- CentOS服务器配置发送邮件服务
CentOS服务器配置发送邮件服务 lsb_release -a 查看linux系统版本 在CentOS6以上版本自带mailx版本12.4 rpm -qa | grep mailx 查看系统自带的m ...
- socket的shutdown与close
shutdown原型 int shutdown(int socket, int how); socket 指定socket的文件描述符 how 指定shutdown的类型 SHUT_RD 禁止读 ...
- Volley使用指南第二回(来自developer.android)
上一篇文章翻译了一下google的Volley官方文档,讲到了最基本的发送request.这一次我们来下一回:创建一个自定义RequestQueue. 这篇文章将会教你一步一步创建自己的Request ...
- [Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法
主要讲解Android Studio中生成aar文件以及本地方式使用aar文件的方法. 在Android Studio中对一个自己库进行生成操作时将会同时生成*.jar与*.aar文件. 分别存储位置 ...
- hdu 5534 Partial Tree 背包DP
Partial Tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...
- C#中使用UDP通信
UDP通信是无连接通信,客户端在发送数据前无需与服务器端建立连接,即使服务器端不在线也可以发送,但是不能保证服务器端可以收到数据. 服务器端代码: static void Main(string[] ...
- c# 自己制作一个简单的项目倒计时器
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 一个Windows Service项目的完整开发过程
(一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目 -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...